Angular 子路由及动态路由

最新推荐文章于 2026-05-21 07:18:11 发布

原创最新推荐文章于 2026-05-21 07:18:11 发布 · 1.8k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#angular子路由 #二级路由 #动态路由

angular入门专栏收录该内容

20 篇文章

订阅专栏

本文介绍Angular中如何实现子路由和动态路由。通过在`app-routing.module.ts`配置根路由，在`home-routing.module.ts`设置二级子路由的`children`数组，结合`tabLink`动态匹配组件，以及在`home-container.component.ts`添加跳转方法，完成子路由和动态路由的集成。详细步骤包括创建子路由模块、更新HTML模板和实现跳转逻辑。

路由的模块写法_MIKE-zi的博客-CSDN博客首先参考上篇文章angular 路由基础_MIKE-zi的博客-CSDN博客1.首先根节点 app-routing.module.tsconst routes = [{ path: 'home', component: HomeContainerComponent}]@NgModule({ /** * 根路由使用 `RouterModule.forRoot(routes)` 形式。 * 而功能模块中的路由模块使用 `outerModule.forChild(routes)` 形式。 * 启用路由的 dehttps://blog.csdn.net/lee727n/article/details/124454562?spm=1001.2014.3001.5502继续上一节的模块，写Home的下一级子路由

1.hoem-routing.module.ts 注意二级路由使用children数组，同时子路由名称不确定是动态的。使用：tabLink的写法，代表tablink可以是任何值都会匹配到homeDetailComponent

const routes: Routes = [
  {
    path: 'home',
    component: HomeContainerComponent,
    children: [
      {
        /**
         * 路由节点可以没有 component
         * 一般用于重定向到一个默认子路由
         */
        path: '',
        redirectTo: 'hot',
        pathMatch: 'full'
      },
      {
        /**
         * 路径参数，看起来是 URL 的一部分
         */
        path: ':tabLink',
        component: HomeDetailComponent,
      }
    ]
  }
];

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

2.home-container.component.html中增加占位路由

<app-scrollable-tab
  [menus]="topMenus"
  [backgroundColor]="'#fff'"
  [indicatorColor]="'red'"
  [titleColor]="'#3f3f3f'"
  [titleActiveColor]="'red'"
  (tabSelected)="handleTabSelected($event)"
>
</app-scrollable-tab>
<router-outlet></router-outlet>

3.home-container.component.ts 增加跳转的方法

  ngOnInit(): void {}

  handleTabSelected(topMenu: TopMenu) {
    this.router.navigate(['home', topMenu.link]);
  }
}

4.二级子路由中的集体内容，自定义HomeContainerComponent相关文件即可

这就实现了子路由，以及动态路由。