Angular 5中的嵌套路由

发布时间：2020-12-17 10:25:28 所属栏目：安全来源：网络整理

导读：我有以下模块结构： 1- RootModule 路由如下： const routes: Routes = [ { path: '',redirectTo: 'app',pathMatch: 'full' }]; 2- AppModule 路由如下： const routes: Routes = [ { path: 'app',component: AppComponent,children: [ { path: '',redirectT

我有以下模块结构：

1- RootModule

路由如下：

const routes: Routes = [
  { path: '',redirectTo: 'app',pathMatch: 'full' }
];

2- AppModule

路由如下：

const routes: Routes = [
   { 
        path: 'app',component: AppComponent,children: [
            {
                path: '',redirectTo: 'index',pathMatch: 'full'
           }
       ]
   }

此外,AppModule导入MainModule,它只是一个路由模块,配置如下：

const routes: Routes = [
    {
        path: '',component: MainComponent,children: [
            {
               path: 'index',loadChildren: './../modules/index/index.module#IndexModule'
            },{
                path: '',pathMatch: 'full'
            }
       ]
  }

现在,RootComponent是起点：

@Component({
  selector: "app-root",template:  "<router-outlet></router-outlet>"
})
export class RootComponent implements OnInit {
  constructor() { }

  ngOnInit() {
 }
}

AppComponent定义为：

<router-outlet></router-outlet>
<app-quick-sidebar></app-quick-sidebar>

最后,MainComponent定义为：

<app-header-nav></app-header-nav>
<router-outlet></router-outlet>
<app-footer></app-footer>

重点是将应用程序路由到/ index组件,以便通过RooComponent – > AppComponent – > MainComponent – > IndexComponent

到目前为止,通过上述路线,AppComponent被绕过了！

任何的想法？

谢谢

使用当前路由配置,未在AppComponent路径的children数组中配置MainComponent.那么它为什么会出现在它的模板中呢？

现在您的路由配置将如下工作：

>导航到/ app将转到AppComponent
>导航到/ index将转到IndexComponent.

为了实现RooComponent的期望行为 – > AppComponent – > MainComponent – > IndexComponent,您的路由配置应如下所示：

const routes: Routes = [{ 
  path: '',children: [{
    path: '',children: [{
      path: '',pathMatch: 'full'
    },{
      path: 'index',loadChildren: './../modules/index/index.module#IndexModule'
    }]
  }]
}];

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!