无法使用路由器导航到儿童

Question

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

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

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

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

然后我尝试让 layer3 成为 layer2 的子节点，所以我的路线如下所示：

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

但是，每当我这样做时，我都无法再导航到 layer3 (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>