Angular 使用ngIf创建条件分部

我希望实现一个应用程序范围的nav和subnav组合，并在特定页面上显示一个sidenav的条件逻辑。我在routerLink的帖子上尝试了一些ngIf，但都没有解决我的问题。 如Clarity文档所述，app.component.html是我的主容器、标题和子AV。 app.component.html

<div class="main-container">
   <header class="header">
   </header>

   <nav class="subnav">
   </nav>

   <div class="content-container">
      <div class="content-area">
         <router-outlet></router-outlet>
      </div>

      <nav *ngIf="router.url === '/page'" class="sidenav">
      </nav>
   </div>
</div>

---

应用程序中可以有两种不同的布局

空白布局//没有侧边栏

主布局//它有你的侧边栏

您的

路由器将如下所示

const routes: Routes = [
 {
    path: '',
    component: BlankLayoutComponent,
    children: [
        { path: '', redirectTo: 'logincustomer',pathMatch:'full' },
        { path: 'logincustomer', component: LoginComponent }
    ]
  },
{

    path: 'user',
    component: MainLayoutComponent,
    canActivate: [AuthGuard],
    children: [
         { path: 'user', redirectTo:'dashboard', pathMatch: 'full', canActivate: [AuthGuard] }]
 };

您可以在
app.component.ts
中添加代码吗？这是第二个代码块。或者，您可以添加带有*ngIf或ngStyle或canActivate的命名路由器组合。这绝对是一个选择什么是清洁和您的喜好。我已经使用*ngIf来隐藏一些菜单项，如果这是我的目的的话。太棒了，谢谢！我是否可以更简单地使用*ngStyle使用display:none属性实现此解决方案？@JonathonHambleton您也可以使用
ngStyle
，但上面显示的方法对于大规模应用程序非常有效。
const routes: Routes = [
 {
    path: '',
    component: BlankLayoutComponent,
    children: [
        { path: '', redirectTo: 'logincustomer',pathMatch:'full' },
        { path: 'logincustomer', component: LoginComponent }
    ]
  },
{

    path: 'user',
    component: MainLayoutComponent,
    canActivate: [AuthGuard],
    children: [
         { path: 'user', redirectTo:'dashboard', pathMatch: 'full', canActivate: [AuthGuard] }]
 };