从NavBar中删除组件

Question

我想删除NavBar 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>

Answer 1

如果要限制对“联系人”页面的访问，可以使用多种方法。

1. 如果删除或禁用导航栏中的“联系人”按钮很好，那么您只需修改导航栏的HTML代码即可。
2. 如果删除或禁用导航栏中的“联系人”按钮不正确，则可以尝试使用angular route gaurds。您可以在保护文件的canActivate（）函数中返回false，以便始终限制对用户的访问。

Answer 2

对不起，我无法发表评论，但我发现有时设置* ngIf检查是否相等而不是空检查在运行UI更新时无论出于何种原因都能更好地工作。喜欢 ：

* ngIf =“level1Item ==”aValueYouAreLookingFor“

如果它只是变化检测检查this和ngZone ngZone在我当前项目的更大操作中更新UI方面发挥了重要作用，所以值得一看。我一直在使用Angular 4+，因为它出来了，像Angular JS它可以花几个小时来完成任务:-)祝你好运！