Angular 4中的动态嵌套路由器插座使用答案

【问题标题】：Dynamic Nested router-outlet usage in Angular 4Angular 4中的动态嵌套路由器插座使用
【发布时间】：2018-05-17 14:03:30
【问题描述】：

Angular 4 中的动态嵌套路由器插座使用

我有简单的 Angular CLI，带有 angular 的动态路由。

在我的应用程序中，我有 2 个不同的页面，例如 home 和 about。在那个主页中，我想插入更多具有动态内容的主题。所以我在主页中包含了嵌套路由器。在导航嵌套内容时，它会替换为根元素。我已附上在线示例，请检查。任何人都可以为此提供解决方案。

online Sample

路由器配置

    import { Routes } from '@angular/router';

import { AboutComponent } from './about/about.component';
import { HomeComponent } from './home/home.component';
import { HomeNestComponent } from './home/homenest/homenest.component';

export const rootRouterConfig: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'home/homenest', component: HomeNestComponent },

];

【问题讨论】：

标签： javascript angular angular-ui-router angular5

【解决方案1】：

在路由器配置中进行以下更改。

  import { Routes } from '@angular/router';
     import { AboutComponent } from './about/about.component';
    import { HomeComponent } from './home/home.component';
    import { HomeNestComponent } from './home/homenest/homenest.component';

    export const rootRouterConfig: Routes = [
      { path: 'home', component: HomeComponent, 
        children:[{ path: 'homenest', component: HomeNestComponent }]
      },
      { path: 'about', component: AboutComponent },
      { path: 'homenest', component: HomeNestComponent },

    ];

home.component.ts 的变化。

public homeNestClick(e) {
          this.router.navigateByUrl('/home/homenest');
      }

https://stackblitz.com/edit/angular-tf7ru3?file=src/app/home/home.component.ts

【讨论】：