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。

我需要在选择其中一个子项时将router-link-active类添加到 Tasks 菜单。

我发现了那些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();
        });
    }
}

Angular 2 - 为所选子菜单项的顶级项添加自定义类

1 个答案: