Question

在左侧菜单上，当用户使用链接时，我需要突出显示链接。现在可以使用，但菜单的根路径“ li”也突出显示。
我无法设置子路由模块。

左侧菜单html

Changed

app.routing.module ts

<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>

这就是我尝试实现childRoutingModule的方式，但是它在控制台中引发了错误：core.js：15724错误错误：未捕获（承诺）：TypeError：未定义不是一个函数 TypeError：未定义不是函数在Array.map（）

app.routing.module

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 { }

feed-routing.module

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

我想为站点上的每个总部分都拥有一个单独的路由模块，并且我需要链接对URL做出反应并指出当前哪个模块处于活动状态。

我将不胜感激其他提示和最佳做法！

Answer 1

您的paranet组件需要带有标签：

< router-outlet>< /router-outlet>

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

这里是我管理childRoutes的一个示例。


    {
      path: 'utente',
      component: CenterViewComponent,
      children: [
           YYY_ROUTE,
           XXX_ROUTE
           ...
      ]
    }

希望对您有帮助！

Answer 2

要设置要素路线，您必须将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 {}

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

2 个答案: