Angular 2 *ngIf 不重新评估模型更改答案

【问题标题】：Angular 2 *ngIf not reevaluation on model changeAngular 2 *ngIf 不重新评估模型更改
【发布时间】：2016-10-15 08:04:24
【问题描述】：

我有一个带有 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>

有什么建议吗？

【问题讨论】：

@GünterZöchbauer 是对的，你有一个额外的报价。但是，如果这只是您带来代码时的 typeo，那么可能还有另一种解决方案。您可以尝试在 AngularJS 类中调用一个返回其值的函数，如下所示：return this.isSettingsHome;
if (button = "settings") 应该是 if (button === "settings")。

标签： typescript angular

【解决方案1】：

您在<li *ngIf="!isSettingsHome"" class 中有一个多余的"

【讨论】：

这可能是路由器在单击时破坏了组件，并且单击处理程序没有机会更新，或者它可能会更新，但是当您返回时会重新创建组件。从您提供的代码中很难看出。请创建一个允许复制的 Plunker。
您可能希望不将<a> 设为routerLink，而是在OnNavbarClick() 中调用this.router.navigate(['/settings'])
我可能很密集，但导航效果很好，只是按钮显示不正确。我想我不会担心它....只是显示当时处于活动状态。感谢您的帮助。
很难说。在没有看到使用组件和模板的上下文的情况下，我什么也说不出来。我还没有尝试在导航离开的同时更改组件中的状态。

【解决方案2】：

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

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

因为我使用了angular4，然后调用了

detectChanges()

在函数 OnNavBarClick() 的末尾

【讨论】：

缺少代码constructor(private cd: ChangeDetectorRef,..，然后是this.cd.detectChanges()。对于 Angular 开发人员来说，这可能是显而易见的，但当您只是在维护应用程序时则不然。

【解决方案3】：

我不确定这里发生了什么，并且不能不了解更多有关您的路由器结构的信息，但我认为 gunter 可能是正确的，即导航导致组件重新加载并因此将组件恢复为初始状态状态。我将推荐以下重组：

首先，将 routerLinkActive 指令添加到您的路由器链接并将类设置为“hide-link”（或您喜欢的任何名称）

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

然后定义一个简单的 CSS 类来隐藏链接

.hide-link { display: none; }

【讨论】：