从 NavBar 中删除组件答案

【问题标题】：Delete a component from the NavBar从 NavBar 中删除组件
【发布时间】：2018-03-02 18:15:35
【问题描述】：

我正在尝试删除导航栏NavBar Pic 上的联系人按钮。我已经尝试了我所知道的一切并且被卡住了。我是 Angular/Typescript 的新手，因此我们将不胜感激。下面列出的代码来自contacts.components.ts 文件。另外，我浏览了 navbar.component.html 页面，其中没有提到任何地方的联系人。

来自 contacts.components.ts 文件：

import { IProductConfig } from 'app/interfaces/interfaces';
import { BaseComponent } from './../base.component';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-contacts',
  templateUrl: './contacts.component.html',
  styleUrls: ['./contacts.component.css']
})
export class ContactsComponent extends BaseComponent implements OnInit {
  productOptions: IProductConfig;
  queryUrl: String;
  getContactsContentViewFields: JSON;

  ngOnInit() {
    this.productOptions = this.product_config

    this.getContactsContentViewFields = JSON.parse(`{           
      "Description" : {"title":"", "type":"string"}
    }`);

  }
}

来自 navbar.component.html

<ul class="nav">
        <li *ngFor="let level1Item of sidebarLinks" 
routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
          <a *ngIf="level1Item.Href" [href]="level1Item.Href" [attr.data-
toggle]="level1Item?.children?.length > 0 ? 'collapse': null"
            [attr.aria-expanded]="(level1Item.isExpanded == true) ? 'true' : 
'false'" [attr.target]="level1Item?.OpenInNewTab ? '_blank': '_blank'">
            <!--<i class="material-icons" *ngIf="level1Item.TabIcon" 
routerLinkActive="white-text">{{level1Item?.TabIcon}}</i>
            <i class="material-icons" *ngIf="!level1Item.TabIcon" 
routerLinkActive="white-text" style="visibility:hidden 
!important;">stop</i>-->
            <p>{{level1Item.Level1Title}}
              <b *ngIf="level1Item?.children?.length > 0" class="caret"></b>
            </p>
          </a>

【问题讨论】：

基于什么，你想限制？
不清楚在什么条件下要限制联系组件。你想禁用点击它还是什么？
我想完全移除按钮。

标签： angular typescript components navbar

【解决方案1】：

如果您想限制对“联系人”页面的访问，有很多方法可以做到。

如果删除或禁用导航栏中的联系人按钮没问题，那么你只需要修改导航栏的 HTML 代码。
如果删除或禁用导航栏中的联系人按钮不是很好，那么您可以尝试使用angular route gaurds。您可以在保护文件的 canActivate() 函数中返回 false 以始终限制对用户的访问。

【讨论】：

谢谢！删除联系人按钮是目标，但我在 NavBar HTML 中找不到任何相关内容。我会看看我能不能找到它。感谢您的帮助。

【解决方案2】：

抱歉，我无法发表评论，但我发现有时将 *ngIf 设置为检查 equality 而不是 null checks 在遇到任何原因时效果更好用户界面更新。喜欢：

*ngIf="level1Item == "aValueYouAreLookingFor"

如果只是更改检测，请查看 this 和 ngZone ngZone 在我当前项目的大型操作中更新 UI 方面发挥了重要作用，因此值得一看。自从 Angular 4+ 出现以来，我一直在使用它，并且像 Angular JS 一样，它可能需要一些技巧来完成工作:-) 祝你好运！

【讨论】：