时间戳

首页 > 解决方案 > 我可以在 Angular2 中执行此操作吗（子路由中的子路由）

angular - 我可以在 Angular2 中执行此操作吗（子路由中的子路由）

问题描述

我正在使用 Angular 构建一个应用程序，我突然想到我可以构建一系列女儿/孙女路由，在实现它时，孙女级别不起作用，我的问题是这是否可以完成并且我实现它错误或如果不可能这样做。

主要路线是通过延迟加载加载的，然后是一个路由 ts 文件，后面是主要路线的女儿（下面示例中的第一级），在我想放置孙女的那个区域内，但它从来没有用过，尽管url 没有改变，我只是没见过孙子组件。

const routes:Routes = [
    { 
      path: '', 
      children: [
        { 
          path:'route1', 
          component:Component1,
          children:[
            {
              path:'son-component-1',
              component:SonComponent1
            },
            {
              path:'other-son-component-1',
              component:OtherSonComponent1,
              children:[
                  {
                      path:'grandson-component-1',
                      component: GrandsonComponent1
                  },
                  {
                    path:'other-grandson-component-1',
                    component: OtherGrandsonComponent1
                  }
              ]
            },
            {
              path:'sonNComponent1',
              component:SonNComponent1
            },
          ]
         },
        { path:'', redirectTo: 'home' },
        { path:'**', redirectTo: 'home' }
      ]
  }
  ];

非常感谢您的意见。问候。

标签： angularroutes

解决方案

每个带有子组件的父组件都需要<router-outlet></router-outlet>在组件 html 文件中添加一个。

在下面的示例中，ParentComponent 和 Child2Component 都需要一个路由器插座。还使用 path:{'', redirectTo: 'path', pathMatch: 'full'}自动加载您希望用户加载的路径，如果它没有由 url 指定。

const routes: Routes = {
 { path: '', component: ParentComponent, children: [
   { path: '', redirectTo: 'child1', pathMatch: 'full'},
   { path: 'child1', component: Child1Component },
   { path: 'child2', component: Child2Component, children: [
     { path: '', redirectTo: 'grandson1', pathMatch: 'full' },
     { path: 'grandson1', component: Grandson1Component },
     { path: 'grandson2', component: Grandson2Component }
   ]}
 ]
}

例如，如果 Parent 组件是包含 sidenav 的主页面，并且对于主组件，它显示 Child1 和 Child2 组件，这很有用。并且如果 Child2 组件有一个选项卡视图来显示不同的内容，其中内容在每个孙子组件中，并且 child 2 包含选项卡处理。

如果您希望每条路由与同一个路由器出口相关（例如，视图中没有树），您需要使路由平坦：

const routes: Routes = {
 { path: '', component: ParentComponent, children: [
   { path: '', redirectTo: 'child1', pathMatch: 'full' },
   { path: 'child1', component: Child1Component },
   { path: 'child2', redirectTo: 'child2/grandson1', pathMatch: 'full'},
   { path: 'child2/grandson1', component: Grandson1Component },
   { path: 'child2/grandson2', component: Grandson2Component },
   { path: 'child3, component: Child3Component}
 ]}
}

这里只需要 ParentComponent 中的 router-outlet。如果您想对所有路线使用相同的视图区域，这将非常有用。

奖金：

const routes: Routes = {
 { path: '', component: ParentComponent, children: [
   { path: '', redirectTo: 'child1', pathMatch: 'full' },
   { path: 'child1', component: Child1Component },
   { path: 'child2', redirectTo: 'child2/grandson1', pathMatch: 'full'},
   { path: 'child2/grandson1', component: Grandson1Component },
   { path: 'child2/grandson2', component: Grandson2Component },
   { path: 'child2/:id', component: 'GrandsonWithUrlParameterComponent' }, // 'bonus'
   { path: 'child3, component: Child3Component }
 ]}
}

在 GrandsonWithUrlParameterComponent 中，您可以显示来自数据库的不同数据，由同一组件中的 url 指定。例如，id 可以是 db 项目的 id。

您可以使用 :id 访问组件中的内容

export class GrandsonWithUrlParameterComponent implements OnInit {
  constructor(private route: ActivatedRoute) {
  }
  ngOnInit() {
    const id = this.route.snapshot.paramMap.get('id'); // f.example the id of a db item
  }
}

推荐阅读