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

Question

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

我也在考虑离开 app.component 的想法并创建一个子导航栏组件，该组件将在每个组件中重用，但我不确定这是否是执行此操作的最佳方法。任何想法都非常感谢。

Answer 1

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

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