Question

我正在寻找一种应用程序级导航和subnav组合，其条件逻辑可在特定页面上显示sidenav。我在这里的routerLink帖子中尝试了一些ngIf，但是没有一个解决了我的问题。如Clarity文档所述，app.component.html是我的主要容器，标头和subnav。 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>

app.component.ts

class PageComponent {
    constructor(public router: Router) {

    }
}

Answer 1

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

空白布局//没有侧边栏
主布局//具有侧边栏

您的router看起来像这样

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

使用ngIf创建条件局部

1 个答案: