角2 * ngモデルチェンジ時の再評価がありません

Question

私は2つのボタンを備えたナビゲーションバーを持っています。他のページのボタンだけを表示し、現在のページのボタンを無効にします。

設定ページを開くと、設定ボタンが非表示になります。プロファイルボタンをクリックすると無効にならず、設定ボタンが表示されません。

export class SettingsComponent implements OnInit { 
 
    isSettingsProfile = false; 
 
    isSettingsHome = false; 
 
    
 
    ngOnInit() { 
 
     this.isSettingsHome = true; 
 
     this.isSettingsProfile = false; 
 
    } 
 
    
 
    OnNavBarClick(button: string) { 
 
     if (button = "settings") { 
 
      console.log ('setting home true/ profile false') 
 
      this.isSettingsHome = true; 
 
      this.isSettingsProfile = false; 
 
     } 
 
     else if (button = "profiles") { 
 
      console.log ('setting home false/ profile true') 
 
      this.isSettingsProfile = true; 
 
      this.isSettingsHome = false; 
 
     } 
 
     
 
    }

そして、ナビゲーションバーのHTML：：

ここでコンポーネントクラスのコードです

 <ul class="nav navbar-nav navbar-right"> 
 
      <li> <a [routerLink]="['/home']" href="#">Home</a></li> 
 
      <li *ngIf="!isSettingsHome" class="active"><a [routerLink]="['/settings']" href="#" (click)="OnNavBarClick('settings')">Settings</a></li> 
 
      <li *ngIf="!isSettingsProfile"><a [routerLink]="['/settings/profile']" href="#" (click)="OnNavBarClick('profile')">Profile</a></li> 
 
     </ul>

任意の提案ですか？

Answer 1

あなたは<li *ngIf="!isSettingsHome"" class

Answer 2

で冗長"を持っている私は、ブレッドクラム・コンポーネントを実装するときに、この問題を持っていたin this SO answerを提案されたソリューションを適用しています。私はangular4を使用しているので、あなたの機能OnNavBarClick（）私は

Answer 3

の終わりに

detectChanges（）

を呼び出す

import { ChangeDetectorRef } from '@angular/core'; 

に変更する必要がありましたここで何が起こっているのかわからないし、ルータの構造についてもっと知らなくてはいけませんが、ナビゲーションがコンポーネントのリロードを引き起こしている可能性が高いと思いますこれによりコンポーネントが初期状態に戻ります。その後、簡単なCSSを定義

<li><a [routerLink]="['/settings']" routerLinkActive="hide-link">Settings</a></li> 

、

まずルーターのリンクにrouterLinkActiveディレクティブを追加し、「リンクを非表示」（またはお好みの任意の名前）するクラスを設定し

：私は、次の再構築をお勧めしますクラスをリンクを非表示にする

.hide-link { display: none; }