Angular 2 : Remove class if root route not active

Question

我只了解如何使用 *ngIf 删除整个元素，即特定路线。

假设我有一个类应用于我的应用程序(标题)的元素，仅适用于 routerLink="/"，这意味着如果我切换到 "/other-page"，我需要 header 来丢失该类。

我怎样才能实现这个目标？

如何将[ngClass]链接到路线更改？

代码:

import { Component, ElementRef, ViewChild, Renderer, AfterViewInit, Input } from '@angular/core';

import { LayoutService } from 'app/core/services/layout.service';

@Component({
    moduleId: module.id,
    selector: 'header-main',
    template: `

    <header class="header-main"
        [ngClass]="{'transparent' : isMenuShown}" #header>

        <div class="wrapper">
            <a routerLink="/" routerLinkActive="active" routerLinkActiveOptions="{exact: true}" class="logo">
                <img src="../../../assets/images/logo_dark.svg" alt="{{logoAlt}}" title="{{logoAlt}}">
            </a>
            <a (click)="menuToggle($event)" class="nav-trigger" #navTrigger>
                <i class="icon icon-menu" (click)="isMenuShown = !isMenuShown;"></i>
            </a>
        </div>

        <nav class="sub-nav" [ngClass]="{'shown' : isMenuShown}">
            <a href="#" class="nav-item">about us</a>
            <a href="#" class="nav-item">team</a>
            <a href="#" class="nav-item">work</a>
        </nav>

        <div class="lets-talk" [ngClass]="{'white' : isMenuShown}">
            <a href="#" class="talk-link">
            <i class="icon icon-talk"></i>
            <p class="link-text">let's talk</p>
            </a>
        </div>

    </header>

    <main-menu (click)="onMenuSelect()" [ngClass]="{'menuShown': isMenuShown}" #mainMenu></main-menu>
`
})


export class HeaderMainComponent {

    @Input() logoAlt: string;
    @Input() logoTitle: string;

    @ViewChild('navTrigger') navTrigger: ElementRef;

    isMenuShown: false;

    constructor(private layoutService: LayoutService, private renderer: Renderer) { }

    menuToggle(event: any) {
          if (this.navTrigger.nativeElement.classList.contains('opened')) {
        this.navTrigger.nativeElement.classList.remove('opened');
        } else {
            this.navTrigger.nativeElement.classList.add('opened');
        }
    }

    onMenuSelect(event: any) {
       this.isMenuShown = false;
       this.menuToggle(event);
    }

}

Answer 1

查看 routerLinkActive指令。

该指令允许您根据特定路由是否处于事件状态向元素添加或删除类。

在您的情况下，您可能还想利用设置为 {exact: true} 的 routerLinkActiveOptions，因为您不希望添加您的类当“/”路由处于事件状态时。

编辑:

根据您的更新，您没有正确设置 routerLinkOptions。

您的代码示例:

  <a routerLink="/" routerLinkActive="active" routerLinkActiveOptions="{exact: true}" class="logo">

您需要将其更改为:

 <a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}" class="logo">

请注意使用方括号来指示您要将 routerLinkActiveOptions 输入绑定(bind)到对象。当您省略方括号时，Angular 会假设您要将 routerLinkActiveOptions 绑定(bind)到字符串 "{exact: true}"

(基本上，Angular 将 routerLinkActiveOptions="{exact: true}" 转换为 [routerLinkActiveOptions]="'{exact: true}'"- 这绝对不是您想要的。 )