我只知道如何用*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);
}
}
查看 routerLinkActive 指令。
此指令允许您根据特定路由是否处于活动状态向元素添加或删除类。
在您的情况下，您可能还希望利用设置为{exact: true}routerLinkActiveOptions，因为您不希望在"/"路由处于活动状态时添加您的类。
编辑：
从您的更新中，您没有正确设置路由器链接选项。
您的代码示例：
<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}'" - 这绝对不是你想要的。
routerLinkActive和routerLinkActiveOptions的组合对你不起作用真的很奇怪......您所描述的是它们的确切用例。
但除此之外，您可以采取更长的方法。Router服务具有一个方法isActive，也可用于测试给定 URL 当前是否处于活动状态。(还需要第二个布尔参数来指示是测试完全匹配还是部分 url 匹配 - 您需要将第二个参数设置为 true。
当然，这种方法是一次性检查 - 每次要检查时都必须调用它 - 但是通过将其绑定到更改检测中，您可以让 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方法。这样，每当发生更改检测时，标头组件上的类将反映路由器的当前状态。
这应该得到你想要你需要的。
(路由器LinkActive无法完成你想要的仍然很奇怪，但是没有看到实际的实现，我不能说出了什么问题。
不过，看看你班的其余部分 - 我很确定你可以通过正确使用绑定来简化它。特别是，我认为您不需要渲染器来打开和关闭类 - 您可以使用与标题一起使用的技术类似的技术。
无论如何，我希望这有所帮助。
尝试这样的事情：
<a [routerLink]="['/home']" [routerLinkActive]="['is-active']">Home</a>
您可以将[routerLinkActive]="['your-class-name']"属性添加到带有角度路线的链接中