获取相对于父路由的url段

Question

在一个有嵌套路由配置的Angular 11应用中，我想知道url相对于父路由是什么。

。如果我的路由配置是

{
'car/:id', children: [{ path: 'tyres', CarTyreComponent }],
}

，用户在car/5/tires，答案是"tyres"。

此外，我希望能够更新和访问模板中的值，以便我可以突出显示轮胎段落如下:

[ngClass]="if this.router.url.startsWith('tyres') ? 'active' : ''"

但是当你嵌套它时，上面的例子不再工作，我似乎陷入了ActivatedRoute和Router的可订阅和不可订阅选项的困境。

这样做是有效的，但似乎是一个容易出错的方法:

[ngClass]="this.router.url.split('/')[3] === 'tyres' ? 'active' : ''"

有更好的方法吗?

Answer 1

如果您试图从子组件获取url段，它应该是:
在您的component.ts:

urlToCheck$$: Subject<string> = new Subject();
constructor(private _route: ActivatedRoute){
this._route.parent?.url.subscribe( url => this.urlToCheck$$.next(url[0].path) )`

html:

[ngClass]="(urlToCheck$$ | async) === 'tyres' ? 'active' : ''"