如果不编写一些自定义逻辑来保存状态，您无法使用这样的包罗万象的路线来实现这一点。
有两种方法可以实现您想要的（以下两个示例都显示）。
- 使用独特的路线。这样您就可以使用
routerLink，并且可以根据路由器配置轻松确定哪个路由处于活动状态。使用这种方法，您不能使用 ** 包罗万象的路由，因为它取决于路由器。
- 使用某种状态，混合使用 Observables，这样您就可以从任何地方切换侧边栏并确定活动链接的方式。通过这种方法，您可以使用
** 包罗万象的路由，因为这不依赖于路由器。
我将展示下面的两个示例，但在此之前我应该提出一个警告。该答案基于对您的业务逻辑一无所知。
我的意思是，如果您的侧边栏是数据驱动的，那么它可能会改变您做事的方式。例如，在我的应用程序中，我有一个类似于您的示例的树形视图侧边栏，但我的是数据库驱动的，这意味着每个项目都有一个唯一的标识符。使用该 ID，我可以只使用像 /topic/:topicId/subtopic/:subtopicId 这样的路由，并且如果 URL 中当前的 topicId 等于 a侧边栏链接上的特定topicId，依此类推。这使它变得微不足道。
尽管如此，给你：
方法#1
使用下面的树视图链接，您可以导航到以下链接，相应的链接将变为活动状态：
/link1/link1/sublink1/link1/sublink1/sub2link1/link1/sublink2/link2/link3
示例侧边栏：
<ul>
<li>
<a [routerLink]="['/link1']" [routerLinkActive]="'active'">Link1</a>
<ul>
<li>
<a [routerLink]="['/link1/sublink1']" [routerLinkActive]="'active'">Sublink1</a>
<ul>
<li>
<a [routerLink]="['/link1/sublink1/sub2link1']" [routerLinkActive]="'active'">Sub2link1</a>
</li>
</ul>
</li>
<li>
<a [routerLink]="['/link1/sublink2']" [routerLinkActive]="'active'">Sublink2</a>
</li>
</ul>
</li>
<li>
<a [routerLink]="['/link2']" [routerLinkActive]="'active'">Link2</a>
</li>
<li>
<a [routerLink]="['/link3']" [routerLinkActive]="'active'">Link3</a>
</li>
</ul>
方法 #2
使用这种方法，而不是使用routerLink 进行导航，您可能必须调用在您的组件或某处的服务中定义的函数，并且它们的功能会在导航之前设置一些状态。当它设置该状态时，侧边栏必须监听变化（可能是Observable），并且侧边栏可以根据这些变化切换某些链接的活跃度。
这是一个伪代码示例：
模板：
<ul>
<li>
<a (click)="toggleSidebar('link1')" [class.active]="activeLink === 'link1'">Link1</a>
</li>
<li>
<a (click)="toggleSidebar('link2')" [class.active]="activeLink === 'link2'">Link2</a>
<ul>
<li>
<a (click)="toggleSidebar('link2/sublink1')" [class.active]="activeLink === 'link2/sublink1'">Link2 Sublink1</a>
</li>
</ul>
</li>
</ul>
组件：
@Component({...})
export class MyComponent implements OnInit {
activeLink: string;
constructor(private sidebarService: SideberService) {}
ngOnInit() {
this.sidebarService.activeLink$.subscribe((activeLink: string) => {
this.activeLink = activeLink;
}));
}
toggleSidebar(activeLink: string) {
this.sidebarService.activeLink.next(activeLink);
}
}
服务：
@Injectable()
export class SidebarService {
activeLink: ReplaySubject<string> = new ReplaySubject();
activeLink$: Observable<string> = this.activeLink.asObservable();
}
现在，每当您向sidebarService.activeLink 流中发出值时，侧边栏组件（应该订阅该可观察对象）将获得活动的侧边栏链接，然后您可以在模板中使用该链接，如我的示例所示切换某个侧边栏链接。
如果您希望侧边栏默认为某个链接，您可以从ReplaySubject 切换到使用BehaviorSubject 并为其指定默认值，例如link1。例如：
@Injectable()
export class SidebarService {
activeLink: BehaviorSubject<string> = new BehaviorSubject('link1');
activeLink$: Observable<string> = this.activeLink.asObservable();
}
这样在页面加载时，侧边栏中的link1 将默认处于活动状态，因为这是流中的初始值。