如果激活了父路由，如何保持路由器链接处于活动状态

Question

我有一个包含四个部分的菜单

• 首页
• 类别
• HowItWorsk
• 关于

如果用户选择类别，则我的URL更改为/categories/section1。在我的section1组件中，我有2个按钮，分别指向categories/section2，categories/section3。

问题是routerLinkActive仅适用于/categories/section1，如果URL具有routerLinkActivate，我想要的是/categories/*为真。

我经历了很多这样的问题，但都没有解决我的问题。当我尝试找到解决方案时，发现了一个堆栈闪电实例。stackblitz demo

Answer 1

您可以编写自己的routerLinkActive，然后使用[class.active]来切换活动的班级。

您基本上是从Router获取当前网址，并检查其是否包含您的路径，例如如果您想/categories/*使用this.router.url.includes（'/ categories /'）`

component

constructor(
   private router: Router,
) {}

public isActive(): boolean {
   return this.router.url.includes('/categories/');
}

模板

<a [class.active]="isActive()"> My Link </a>

现在您只需要创建一个CSS类active