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}'” - 这绝对不是您想要的。）

Answer 2

routerLinkActive和routerLinkActiveOptions组合对你不起作用真的很奇怪......你所描述的是它们的确切用例。

但除此之外，你可以采取更长的方法。 Router服务的方法isActive也可用于测试给定的网址当前是否处于活动状态。 （它还需要第二个布尔参数来指示是否测试精确的网址匹配或部分 - 您希望第二个参数为真。）

当然，这种方法是一次性检查 - 你必须在每次检查时调用它 - 但是通过将其绑定到更改检测中，你可以让Angular为你调用它。

因此，我将您的组件更改为：

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

import { LayoutService } from 'app/core/services/layout.service';
import { Router } from '@angular/router';

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

    <header class="header-main"
        [ngClass]="{'transparent' : isMenuShown}" #header
        [class.active]="isRootActive()"
    >
 ......
`
})
export class HeaderMainComponent {

......

    constructor(
      private layoutService: LayoutService, 
      private renderer: Renderer,  // <!-- you can probably get rid of this with proper use of binding
      private router: Router
   ) { }

  .....

    isRootActive() {
      // returns true if the current route is exactly '/'
      return this.router.isActive('/', true);
    }

}

因此，在标头组件上，我可以（间接地）将活动类（[class.active]）绑定到路由器的isActive方法。这样，每当发生变化检测时，标题组件上的类将反映路由器的当前状态。

这应该让你想要你。

（routerLinkActive无法实现您的目标，但仍然很奇怪，但如果没有看到实际的实施情况，我就无法说出出了什么问题。

看看你班上的其他人 - 我非常确定你可以通过正确使用绑定来简化它。特别是，我不认为你需要渲染器来打开和关闭一个类 - 你可以使用类似的技术来处理你将使用的标题。

无论如何，我希望这会有所帮助。

Answer 3

尝试这样的事情：

<a [routerLink]="['/home']" [routerLinkActive]="['is-active']">Home</a>

您可以使用Angular Route

为您的链接添加[routerLinkActive]="['your-class-name']"属性

Angular 2：如果根路由未激活，则删除类

3 个答案: