Class Toggle funktioniert nicht zwischen den Komponenten Angular 4

Question

Hey, ich habe ein Hamburger-Menü, das beim Klicken offensichtlich eine is-active Klasse bekommt und diese Klasse wechselt je nach Klick, mein Problem ist, dass es funktioniert, wenn ich auf meiner Homepage bin, und dann, wenn ich auf eine andere Seite über routerLink klicke funktioniert es aber dann, wenn ich auf eine zweite Seite klicke entfernt es die Klasse is-active wie programmiert, aber wenn ich es wieder anklicke fügt es nicht die Klasse is-active hinzu, aber wenn ich es noch einmal klicke is-active wird angewendet ... das passiert auch, wenn ich auf einer Seite gestartet habe, die nicht zu Hause ist Ill click the hamburger passiert nichts und wenn ich nochmal darauf klicke wird die is-active Klasse angewendet Ich bin mir nicht sicher, was hier passiert, wenn jemand es weiß wäre eine große Hilfe

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

So etwas seltsam, das ist passiert, ist ..

Wenn ich (click)="hamburgerClick()" entferne funktioniert die Schaltfläche wie erwartet auf jeder Seite mit Ausnahme der Startseite, aber offensichtlich brauche ich die Schaltfläche auf der Homepage arbeiten und dann auch die Funktion zum Öffnen des Nav

Answer 1

Ich habe versucht, Ihr Problem zu reproduzieren, könnte aber nicht. Ich stelle jedoch fest, dass die Art und Weise, wie Sie in Angular 2+ verwenden, nicht korrekt ist. Sie können dies versuchen und sehen, ob es das Problem behebt:

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

Sie diese Syntax als auch auf die übrigen routerLinks gelten sollte.