类切换在组件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;
  }
}

UPDATE

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

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

Answer 1

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

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

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