Question

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

首页
类别
HowItWorsk
关于

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

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

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

Answer 1

 [routerLinkActiveOptions]="{ exact: false }"

Answer 2

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

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

编辑

根据您的评论，您可以使此代码更具动态感

组件

constructor(
   private router: Router,
) {}

public isActive(base: string): boolean {
   return this.router.url.includes(`/${base}`);
}

模板

<a [class.active]="isActive('Categories')"> Im orange when you are on the route "Categories" </a>
<a [class.active]="isActive('HowItWorks')"> Im orange when you are on the route "HowItWorks" </a>

css

.active {
   color: orange
}

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

Answer 3

我找到了解决此问题的方法。我将routerLink="categories/section1"更改为routerLink="categories"，并在路由配置中添加了具有空路径的新记录。新添加的路径如下所示：{path: '',component: Section01Component}, 现在我的模板看起来像<a routerLink="categories" routerLinkActive="active"></a>。现在您可以在子路由之间导航，而无需启用routerLinkActive。

              {
                    path: 'categories',
                    component: CategoriesHomeComponent,
                    children: [
                    {
                            path: '',
                            component: Section01Component,
                    },
                    {
                        path: 'section1',
                        component: Section01Component,
                    },
                    {
                        path: 'section2',
                        component: Section02Component,
                    },
                    {
                        path: 'section3',
                        component: Section03Component,
                    },

                    ]

                },

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

3 个答案: