时间戳

首页 > 解决方案 > Angular 4中的动态嵌套路由器插座使用

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

问题描述

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

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

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

在线样品

路由器配置

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

];

标签： javascriptangularangular-ui-routerangular5

解决方案

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

  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

推荐阅读