Question

我正在尝试做嵌套的嵌套路由.... 我在选项卡中有一个选项卡，使用动态加载选项卡和angular2材料选项卡组件。

我的第一个嵌套标签确实有效。但我的第二个没有。

{ path: 'output',component: OutputComponent, canActivate: [AuthGuard], children: [
        { path: 'details',component: OutputDetailsComponent, canActivate: [AuthGuard], outlet:'output',children: [
            { path: 'distributions',component: OutputDistributionsComponent, canActivate: [AuthGuard], outlet:'data'},
        ]}
       ]
     }

所以我可以到http://localhost:4200/#/output/(output:details)

但我无法进行发行

http://localhost:4200/#/output/(output:details/(data:distributions))

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'output'

所以我有：

<router-outlet></router-outlet> -->app.component.html
      <router-outlet name="output"></router-outlet> -- output.componenbt.html
          <router-outlet name="data"></router-outlet> --outpuyt.data.component.html

所以在ts中我可以像这样加载第一个标签：

['/output', {outlets: {'output': ['details']}}]

在嵌套的嵌套中我尝试了这个：

['/output', {outlets: {'output': [{outlets: {'data': ['distributions']}}]}}]}

处理此问题的正确方法是什么？

如果我粘贴在浏览器中，这将正确地让我到路线： http://localhost:4200/#/output/(output:details/(data:distributions))

我只是不知道如何使用routerLink构建..

我也试过这个无济于事：

  ['/output', {outlets: {'output': ['details/(data:distributions)']}}]

Answer 1

实际上，嵌套路由需要在嵌套出口

中加载

<router-outlet>
    <router-outlet>
        <router-outlet></router-outlet>
    </router-outlet>
</router-outlet>

最好为每个子路径创建根路由

{ 
    path: 'output',
    canActivate: [AuthGuard], 
    children: [
        {
            path: "",
            component: "OutputComponent"
        },
        { 
            path: 'details',
            canActivate: [AuthGuard],
            children: [
                {
                    path: "",
                    component: "OutputDetailsComponent"
                },
                { 
                    path: 'distributions',
                    component: OutputDistributionsComponent, 
                    canActivate: [AuthGuard], outlet:'data'
                 }
             ]
         }
     ]
 }

angular2和嵌套嵌套路由 - 如何构造routerLink

1 个答案: