Question

Angular v2.2.1，路由器 v3.2.1

我有一个带子代的嵌套路由器，路由器链接如下所示：

SettingWithCopyWarning（/todo/iwgv4ehyav544f7c/zone1是zone1）

的子路线

todo/:id（/todo/iwgv4ehyav544f7c/zone2是zone2）

的子路线

现在请记住，todo/:id页面有自己的路由器插座，可以显示孩子们。

在父母（todo/:id）中，我有2个按钮，Button1和Button2。

我希望在子路由todo/:id处于活动状态时显示Button1，在zone1处于活动状态时显示Button2。

我设法制作了一些东西，但我不认为这是正确的方法：

zone2

还有另一种更好的方式来订阅路由器并获取子参数，所以我可以在父级中使用此值吗？

编辑：

到目前为止，我尝试过的其他一些东西在Victor Savkin的书中没有起作用：

   router.events
     .filter(event => event instanceof NavigationEnd)
     .map(value => value.url.split("/")) // what I get: ["","todo","iwgv4ehyav544f7c","zone1"]
     .map(value => value[3]) // selecting the value at id 3 which is the child param
     .subscribe(response => {
       this.activatedChildUrl = response;  // end value is "zone1"
     })

Answer 1

路由器有一个更简单，更优雅的解决方案来确定哪条路径处于活动状态，您可以根据活动路径隐藏和显示元素。

文档：https://angular.io/docs/ts/latest/api/router/index/Router-class.html#!#isActive-anchor

应用于我上面的项目示例：

在TS：constructor(router: Router){}

在HTML中：*ngIf="router.isActive('/todo/' + id + '/zone1')"

您从路线参数或所选对象中提取ID。

订阅子路线更改，在父母中了解选择了哪个子路线段？

1 个答案: