Angular 2：如果根路由不活动，则删除类

Question

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

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

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

我怎样才能链接[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指令。

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

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

编辑：

从您的更新来看，您没有正确设置 routerLinkOptions。

您的代码示例：

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

您需要将其更改为：

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

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

（基本上，Angular 翻译routerLinkActiveOptions="{exact: true}"为 [routerLinkActiveOptions]="'{exact: true}'" - 这绝对不是您想要的。）