隐藏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;
   }
}
点赞
评论