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

由任性发布于 2020-05-24 00:26:10

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

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

cnon

2020-05-24 00:26:10

您可以使用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相亲

2020-05-24 00:26:10

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

<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;
   }
}

任性

这家伙很懒，什么都没留下

积分
0
话题
0
评论
3396
注册排名
1894