typescript - Angular 2 *ngIf 不重新评估模型更改

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

我在实现面包屑组件时遇到了这个问题，并应用了建议的解决方案 in this SO answer .我不得不改成

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

因为我用的是angular4然后调用

detectChanges()

在你的函数 OnNavBarClick() 结束时