Question

Angular 4中的动态嵌套路由器出口使用

我有一个简单的Angular CLI，带有带角度的动态路由。

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

路由器配置

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

];

Answer 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

Angular 4中的动态嵌套路由器出口使用

1 个答案: