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

Question

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

app.component.html

<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>

app.component.ts

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;
  }
}

更新

所以正在发生的一些奇怪的事情是..

如果我删除 (click)="hamburgerClick()" 该按钮在除主页之外的每个页面上都按预期工作，但显然我需要该按钮在主页上工作，然后还使用打开导航功能

Answer 1

我尝试重现您的问题，但未能成功。但是，我注意到您在 Angular 2+ 中使用 routerLink 的方式不正确。您可以尝试一下，看看是否能解决问题:

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

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