知道在parent中选择了什么child RouteSegment吗？

Question

我希望能够在 parent 组件或应用程序组件中找出哪个 child 路由处于活动状态。例如，能够设置活动路线的样式 link。我看到 [routeLink] 添加了 'router-link-active' class，但在我的示例中，我有一个带有路由 '/' 的 'home'，无论如何总是有 class我使用的路线。有什么办法可以在outlet的parent看到你在哪条线路上？

我已经从 @angular/common 注入了 Location 并且当路由改变时我能够看到我猜想的完整路径：

ngOnInit() {
  this.router.changes.subscribe(changes => {
    console.log('location info:', this.location.platformStrategy.path());
  });
}

有没有办法从 parent 到达 RouteTree 或当前活动的 RouteSegment？或者检查 router-outlet 并查看其中加载了哪些组件？

Answer 1

您可以像访问当前路线一样

  constructor(private router:Router, private routeSerializer:RouterUrlSerializer, private location:Location) {
    router.changes.first().subscribe(() => {

      console.log('router', this.router);
      let urlTree = this.routeSerializer.parse(location.path());

      // to get the individual segments of the route use
      console.log('serializer', urlTree.children(urlTree.root)[0].segment);
      console.log('serializer', urlTree.children(urlTree.children(urlTree.root)[0])[0].segment);
    });
  }

Answer 2

在@Gunter 的回答之后，我最终是这样做的：

constructor(
  public router: Router,
  public routerSerializer: RouterUrlSerializer,
  public location: Location
) { }

ngOnInit() {
  this.router.changes.subscribe(changes => {
    this.updatePath();
  });
}

updatePath() {
  let path = this.location.path();
  let urlTree = this.routerSerializer.parse(path);
  let node = urlTree;
  let segment: UrlSegment = urlTree.root;
  let result = segment.segment;
  while (urlTree.children(segment).length > 0) {
    segment = urlTree.children(segment)[0];
    if (result.length > 1) result += '/';
    result += segment.segment; // is a string
  }

  this.path = result;
}

children() 接受一个 UrlSegment 和 returns 一个 UrlSegment 的数组。根 segment.segment 是一个空字符串，如果我想让它成为 '/':

我可以这样做

this.path = result.length == 0 ? "/" : result;

知道在parent中选择了什么child RouteSegment吗？

Know in parent what child RouteSegment is selected?

angular2-routing

angular