Question

我有一个Angular 2应用程序，导航工作正常如下：

if(array[W][j] > array[i][j])
    NBR[j] = array[W][j];

在C2中我有一个引用C3的链接如下：

{ path: 'layer1/layer2', component: C2 } }
{ path: 'layer1/layer2/layer3', component: C3, canDeactivate: [CanDeactivateGuard] }  },

然后我尝试将layer3设为layer2的子项，因此我的路由如下所示：

[routerLink]="['./layer3']

然而，每当我这样做时，我都无法再导航到第3层（C3）。 layer2组件（C2）保留在屏幕上。

我已经阅读了关于儿童路由的Angular 2文档Routing With Children，但我无法弄清楚这个链接路由表有什么问题。

Answer 1

你需要一个空的路径让孩子们试试这个：

{ path: '', redirectTo: 'layer1/layer2', pathMatch: 'full' },   
    { path: 'layer1/layer2', component: C2 },  children: [
        { path: 'layer3', component: C3, canDeactivate: [CanDeactivateGuard], outlet: "layer" } 
    ] }

在你的控制器中执行此功能

public goToComponent(url) {
        this._router.navigate(["layer/layer1/layer2", { outlets: { "layer": url } }]);
    }

使用

goToComponent('layer3')

HTML

<router-outlet name="layer"> </router-outlet>

无法使用路由器导航到子项

1 个答案: