Angular中导航栏锚点标签元素动态隐藏异常求助

首先，咱们先揪出问题的核心：你用的[nghide]并不是Angular（2+）的内置指令——这是AngularJS（1.x）的语法，在当前Angular版本里完全不生效，这也是导致你遇到“整个导航栏消失”异常的关键原因。

下面给你几个Angular官方推荐的可行解决方案：

方案1：使用*ngIf指令（推荐） #

*ngIf会直接在DOM中添加/移除元素，是控制元素显示隐藏最常用的方式。把你原来的[nghide]="x"替换成*ngIf="x"即可：

<nav class="navbar navbar-inverse text-" style="height: 60px;">
  <div class="container-fluid">
    <div class="collapse navbar-collapse" id="myNavbar">
      <img src="\assets\nextel.png">
      <a class="navbar-brand pull-right" *ngIf="x" [routerLink]="['login']" style=" margin-top: 32px; color: #000;">
        <span class="glyphicon glyphicon-log-in"></span>&nbsp;Login
      </a>
    </div>
  </div>
</nav>

• 当x为true时，这个<a>标签会被正常渲染到DOM中；
• 当x为false时，它会被完全移除，不会占用DOM空间。

方案2：使用[hidden]属性绑定 #

如果你不想移除DOM元素，只是通过CSS隐藏它，可以用[hidden]属性。注意[hidden]的逻辑是值为true时隐藏元素，所以要实现“x为true时显示”的需求，需要对x取反：

<nav class="navbar navbar-inverse text-" style="height: 60px;">
  <div class="container-fluid">
    <div class="collapse navbar-collapse" id="myNavbar">
      <img src="\assets\nextel.png">
      <a class="navbar-brand pull-right" [hidden]="!x" [routerLink]="['login']" style=" margin-top: 32px; color: #000;">
        <span class="glyphicon glyphicon-log-in"></span>&nbsp;Login
      </a>
    </div>
  </div>
</nav>

这种方式本质是给元素添加display: none样式，元素依然存在于DOM中。

额外注意事项 #

1. 确保你在组件的.ts文件中正确声明了变量x，比如：

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponentComponent {
  x: boolean = true; // 根据你的需求设置初始值
}

2. 导航栏消失的问题：大概率是错误的[nghide]指令导致Angular解析异常，换成上面的正确指令后，这个问题应该会自动解决。

内容的提问来源于stack exchange，提问作者i.s.n raju