Question

我有一个带2个按钮的导航栏。我希望只显示其他页面的按钮并禁用当前页面的按钮。

打开设置页面时，隐藏设置按钮。当我点击个人资料按钮时，它不会禁用，设置按钮也不会显示。

这是组件类代码：

＆＃13;

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;
       }
       
   }

＆＃13;

导航栏html：

＆＃13;

        <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>

＆＃13;

有什么建议吗？

Answer 1

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

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

因为我使用angular4然后调用

detectChanges（）

在你的函数OnNavBarClick（）

的末尾

Answer 2

"

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

Answer 3

我不确定这里发生了什么，并且无法更多地了解您的路由器结构，但我认为枪手可能是正确的导航导致组件重新加载从而将组件恢复到它的初始状态。我将推荐以下重组：

首先，将routerLinkActive指令添加到路由器链接，并将类设置为＆＃34; hide-link＆＃34; （或者你喜欢的任何名字）

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

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

.hide-link { display: none; }

Angular 2 * ng如果不对模型更改进行重新评估

3 个答案: