Angular 2 * ng如果不對模型更改重新評估

我有一個帶有2個按鈕的導航欄。我只希望顯示其他頁面的按鈕並禁用當前頁面的按鈕。Angular 2 * ng如果不對模型更改重新評估

打開設置頁面時，隱藏設置按鈕。當我點擊配置文件按鈕時，它不會禁用，並且不會顯示設置按鈕。

下面是組件類代碼：

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>

有什麼建議？

來源

2016-06-14 John Baird

@GünterZöchbauer是正確的，你有一個額外的報價。但是，如果這只是代碼結束時的類型，那麼可能有另一種解決方案。你可以嘗試在你的AngularJS類中調用一個返回它的值的函數，如下所示：'return this.isSettingsHome;' – Jwags

'if（button =「settings」）'should'if（button ===「settings」） '。 –

你有多餘的"在<li *ngIf="!isSettingsHome"" class

來源

2016-06-14 14:18:42

這是我的錯字，我的代碼沒有。對不起.. –

可能是路由器在點擊時破壞了組件，並且點擊處理程序沒有得到更新的機會，或者它可能會更新，但是當您導航回時，組件會被重新創建。很難從您提供的代碼中看到。請創建一個允許重現的Plunker。 –

您可能希望**不**使''''routerLink'並在'OnNavbarClick（）' –

我實現麪包屑組成部分，並已應用該解決方案提出 in this SO answer當有這個問題。我不得不改變，以

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

因爲我使用angular4然後調用

detectChanges（）

在你的函數OnNavBarClick（）

來源

2017-12-05 15:56:35

我結束不知道這裏發生了什麼事情，不能不知道更多關於您的路由器結構，但我認爲gunter可能是正確的導航導致組件重新加載d從而將組件恢復到初始狀態。我會建議以下重組：

首先，routerLinkActive指令添加到您的路由器連接和設置類「隱藏鏈接」（或者你喜歡的任何名稱）

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

然後定義一個簡單的CSS類隱藏鏈接

.hide-link { display: none; }

來源

2017-12-05 16:09:11 bryan60

Angular 2 * ng如果不對模型更改重新評估

回答

相關問題