クラストグルはコンポーネント間で動作しません角度4

Question

ちょっと私はクリックで明らかにis-activeクラスを取得し、そのクラスはクリックに応じてトグルするハンバーガーメニューを持っています、私の問題は私が私のホームページにいるとき、 routerLinkで別のページをクリックすると2番目のページに移動しますが、2番目のページをクリックすると、is-activeがプログラムで削除されますが、再度クリックするとクラスが追加されませんis-activeis-activeが適用されます...これは、家にいないページでIveを起動した場合にも発生します。何も起こらないハンバーガーをクリックしてください。再度クリックすると、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

問題を再現しようとしましたない。しかし、角度2でrouterLinkを使用する方法が正しくないことがわかりました。あなたはこれを試してみて、それが問題解決するかどうかを確認することができます

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

をあなたが同様に残りrouterLinksにこの構文を適用する必要があります。