如何设置“pathMatch”和 childRoutingModule 工作的路由？

Question

1. 在左侧菜单中，当用户点击链接时，我需要突出显示链接。现在它可以工作了，但我的菜单的根路径“li”也被突出显示。

2. 我无法设置子路由模块。

左侧菜单 html

<ul class='side-menu'>
  <li *ngFor='let item of menu' routerLinkActive='active-side-menu-item'><a routerLink='{{ item.link }}' class="menu-item-feed">{{ item.title }}</a></li>
</ul>

app.routing.module ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { FeedComponent } from './feed/feed.component';

const routes: Routes = [
  { path: '', pathMatch: 'full', component: FeedComponent },
  { path: 'shoes', pathMatch: 'full', component: FeedComponent },
  { path: 'coats', pathMatch: 'full', component: FeedComponent },
  { path: 'shirts', pathMatch: 'full', component: FeedComponent },
  { path: 'pants', pathMatch: 'full', component: FeedComponent },
  { path: 'item/:id', component: FeedComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

这就是我尝试实现 childRoutingModule 的方式，但它在控制台中抛出错误：core.js:15724 ERROR Error: Uncaught (in promise): TypeError: undefined is not a function 类型错误：未定义不是函数 在 Array.map()

app.routing.module

const routes: Routes = [
  { path: '', pathMatch: 'full', loadChildren: './feed/feed.module#FeedModule' }
];

feed-routing.module

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { FeedComponent } from './feed.component';

const routes: Routes = [
  { path: '', pathMatch: 'full', component: FeedComponent },
  { path: 'shoes', pathMatch: 'full', component: FeedComponent },
  { path: 'coats', pathMatch: 'full', component: FeedComponent },
  { path: 'shirts', pathMatch: 'full', component: FeedComponent },
  { path: 'pants', pathMatch: 'full', component: FeedComponent },
  { path: 'item/:id', component: FeedComponent },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class FeedRoutingModule { }

我想为网站上的每个总部分设置一个单独的路由模块，我需要链接对 url 做出反应并指出哪个模块目前处于活动状态。

如果有任何其他提示和最佳做法，我将不胜感激！

Answer 1

要设置功能路由，您必须将 FeedRoutingModule 导入要使用该路由的模块中。

下面是我的例子

我有 app.routing.ts（主路由）

export const routes: Routes = [
  { path: "", redirectTo: "home", pathMatch: "full" },
  { path: "home", component: HomeComponent },

  //{ path: "**", redirectTo: "account", pathMatch: "full" },
  //lazy load feature module
  { path: "account", loadChildren: "./account/account.module#AccountModule" },
  { path: "portal", loadChildren: "./portal/portal.module#PortalModule", canActivate: [AuthGuardService] },
  { path: "**", redirectTo: "account", pathMatch: "full" },
];

和 app.module.ts

@NgModule({
  declarations: [],
  imports: [
    RouterModule.forRoot(routes)
  ],
  providers: [],
  bootstrap: []
})
export class AppModule {}

所以当我在我的功能模块中定义子路由时，我必须像 app.module 一样，但使用 RouterModule.forChild

export const accountRoutes: Routes = [
  {
    path: "",
    component: AccountComponent,
    children: [
      { path: "login", component: LoginComponent },
      { path: "register-account", component: RegisterComponent }
    ]
  }
];

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
import { RouterModule } from "@angular/router";

import { RegisterComponent } from "./register/register.component";
import { LoginComponent } from "./login/login.component";
import { AccountComponent } from "./account/account.component";
import { accountRoutes } from "./account.routing";

@NgModule({
  declarations: [],
  imports: [
    RouterModule.forChild(accountRoutes) // use forChild
  ],
  exports: [],
  providers: []
})
export class AccountModule {}

Answer 2

你的paranet组件需要有标签：

然后他知道会有一个子组件+路由；

这是我管理 childRoutes 的示例。

{ 路径：'utente'， 组件：CenterViewComponent， 孩子们： [ YYY_ROUTE, XXX_ROUTE ... ] }

希望能帮到你！