隐藏Angular中单个组件中app.component文件的内容

因此,我正在尝试创建一个Angular应用,该应用将要求您在访问它之前登录。我试图将导航栏保留在app.component文件中,以便在所有组件上重复使用它,但是我想在登录页面上将其删除。我曾想过仅使用CSS隐藏它,但这可能会带来安全风险,因为导航栏也将具有其他路由。

我也在考虑离开app.component的想法,并创建一个将在每个组件中重用的子导航栏组件,但是我不确定这是否是实现此目的的最佳方法。任何想法都将不胜感激。

评论
  • cnon
    cnon 回复

    您可以使用sessionStorage作为一种方式。

    在app.component CSS中写入

    .none{
       display:none;
    }
    

    并在app.component html中放入类

    class="{{ishide()}}"
    

    在app.component.ts中

    ishide(){
       var ishide="none";
       //get here your data from session and with condition change ishide element
       return ishide;
    }
    

    在您的单个组件集存储中

  • 22相亲
    22相亲 回复

    我相信您在路由器插座中有登录组件。像这样更新

    <nav-bar *ngIf="showNavBar"></nav-bar>
    <router-outlet (activate)="toggleNavBar($event)"></router-outlet>
    

    应用内组件

    public showNavBar = true;
    
    toggleNavBar(component) {
       if(component instanceof LoginComponent) {
          this.showNavBar = false;
       } else {
          this.showNavBar = true;
       }
    }