Angular 2 - 将自定义类添加到所选子菜单项的顶部项

Question

我使用带有可视组件的第三方库。菜单构建为平面 ul/li/a：

<ul class="abs-nav abc-left">
    <li><a [routerLink]="['Dashboard']">Dashboard</a></li>
    <li><a [routerLink]="['SystemInformation']">System information</a></li>
    <li><a [routerLink]="['Health']">Health</a></li>
    <li><a href="#" data-dropdown="#tasks-menu" dropdown-position='right'>Tasks</a></li>
</ul>

和子菜单被添加为单独的列表，然后它们被粘在 JS 中。

<ul id="tasks-menu" class="abc-dropdown">
    <li><a [routerLink]="['TasksUpdate']">Update</a></li>
    <li><a [routerLink]="['TasksDeployment']">Deployment</a></li>
</ul>

我添加了 css 标记从顶级菜单中选择的项目（将背景颜色添加到 .abc-nav li a.router-link-active。

I need to add router-link-active class to Tasks menu when one of its subitems is chosen.

我找到了这些 SO： In Angular 2 how do I assign a custom class to an active router link? , Changing the default name of "router-link-active" class by writing a custom directive that adds new class

Answer 1

看看这个问题：angular2-how-to-use-an-or-statement。

基本上你需要的是：

<li>
    <a href="#" data-dropdown="#tasks-menu" dropdown-position='right'
       [class.router-link-active]="currentPath.indexOf('Tasks') !== -1">
        Tasks
    </a>
</li>

可以从位置检索当前路径，例如：

class MyController {
    currentPath: string;

    constructor(private location: Location, private router: Router) {
        this.router.subscribe((val) => {
            this.currentPath = location.path();
        });
    }
}