Question

嘿所以我有一个汉堡包菜单，点击显然会得到一个is-active课程，该课程根据点击切换，我的问题是，当我在我的主页上，然后当我点击另一个页面通过routerLink它可以工作，但是当我点击第二个页面时它会删除编程的类is-active，但是当我再次点击它时它不会添加类{{1但是如果我再次点击它is-active被应用...如果我开始在一个不在家的页面上也会发生这种情况我会点击汉堡没有任何反应如果我再点击它is-active如果有人知道这将是一个很大的帮助，我不确定这里发生了什么

app.component.html

is-active

app.component.ts

<router-outlet></router-outlet>
<div class="nav-page">
  <a routerLink="/"><img class="img" src="../assets/img/nav-logo.svg" /></a>
  <ul (click)="navLinkClick()" class="nav-page_ul">
    <a [routerLink]="['who-we-are']"><li>who we are</li></a>
    <a [routerLink]="['our-technology']"><li>our technology</li></a>
    <a [routerLink]="['our-work']"><li>our work</li></a>
    <a [routerLin]k="['get-in-touch']"><li>contact us</li></a>
  </ul>
</div>
<div class="nav-page-btn">
    <div (click)="hamburgerClick()" [ngClass]="wasClicked ? 'is-active' : ' '" class="hamburger hamburger--spring">
        <div class="hamburger-box">
          <div class="hamburger-inner"></div>
        </div>
    </div>
</div>

更新

所以发生了一些奇怪的事情......

如果我删除import { Component, OnInit } from '@angular/core'; import { Router, Event, NavigationStart } from '@angular/router'; import { NgIf } from '@angular/common'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { routeHidden = true; title = 'app'; wasClicked = false; constructor(private router: Router) // tslint:disable-next-line:one-line {} // tslint:disable-next-line:use-life-cycle-interface ngOnInit() { } hamburgerClick() { this.wasClicked = !this.wasClicked; } navLinkClick() { this.wasClicked = !this.wasClicked; } }按钮在主页以外的每个页面上按预期工作，但显然我需要在主页上按钮工作，然后还使用该功能打开导航

Answer 1

我试图重现你的问题，但不能。但是，我注意到在Angular 2+中使用routerLink的方式不正确。您可以尝试这一点，看看它是否解决了问题：

[routerLink]="['who-we-are']

您也应该将此语法应用于其余的routerLinks。

类切换在组件之间不起作用Angular 4

1 个答案: