Angular 中的二级导航

大佬教程收集整理的这篇文章主要介绍了Angular 中的二级导航，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决Angular 中的二级导航？

我正在使用 Angular 10，但我遇到了路由问题 - 我有两个菜单，顶部菜单和侧边菜单导航，我想实现 2 级路由。 这是我的路由规则：

RouterModule.forRoot([
  { path: 'home',component: HomeComponent },{ path: 'admin',component: adminComponent },{ path: 'admin/rank1',component: Rank1Component,outlet: "rank" },{ path: 'admin/rank2',component: Rank2Component,{ path: '**',redirectTo: 'home',pathMatch: 'full' }
])   

这是我的主要组件：

@Component({
  SELEctor: 'app-root',templateUrl: `<p>
    <a [routerlink]="['/home']">HOME</a> | 
    <a [routerlink]="['/admin']">admin</a> 
    <router-outlet></router-outlet>
  </p>`
})

export class AppComponent {}

这是我的adminComponent：

@Component({
  SELEctor: 'app-root',templateUrl: `<p>
       <a [routerlink]="['/admin(rank:rank1)']">RANK1</a> | 
       <a [routerlink]="['/admin(rank:rank2)']">RANK2</a> 
       <router-outlet name="rank"></router-outlet>
  </p>`
})

export class adminComponent {}

一切都很好，除了 adminComponent 的路由 - adminComponent 内部的二级导航不起作用 你能帮忙吗？

解决方法

  {
    path: 'home',component: LoginComponent
  },{
    path: 'admin',component: AdminpanelComponent
    children: [{
      path: 'rank1',component: AllpostsComponent
    },{
      path: 'rank2',component: AllroomsComponent
    }
    ]
  }'

<button routerLink="admin">Go to admin Page</button>

<button routerLink="rank1">Go to Ranks 1 under Admin Route</button>

大佬总结

以上是大佬教程为你收集整理的Angular 中的二级导航全部内容，希望文章能够帮你解决Angular 中的二级导航所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。