angular - Angular 7，共享相同导航模板的公共路由和安全路由

Question

我希望实现的是公共路线出口和安全路线出口，但让它们都使用相同的导航模板。

我不确定如何执行此操作。我知道你可以命名网点，但不知道这是否需要做？

应用程序路由.module.ts

export const PUBLIC_ROUTES: Routes = [
 { path: '', redirectTo: 'home', pathMatch: 'full' },
  ...
]

export const SECURE_ROUTES: Routes = [
 { path: '', redirectTo: 'home', pathMatch: 'full' },
  ...
]

const routes: Routes = [

 { path: '', component: PublicComponent, data: { title: 
 'Public Views' }, children: PUBLIC_ROUTES },
 { path: '', component: SecureComponent, data: { title: 
 'Secure Views' }, children: SECURE_ROUTES },

 //no layout routes
 { path: 'login', component: LoginComponent },
 //{ path: 'register', component: RegisterComponent },
 { path: '**', component: FileNotFoundComponent }
];

public.component.html

<main-header [navComp]="nav"></main-header>
<main-nav #nav></main-nav>

<div id="main-content" [class.hideNav]="isOpen">
  <main [@fadeAnimation]="getRouterOutletState(o)">
    <router-outlet #o="outlet"></router-outlet>
  </main>
</div>

安全组件.html

<main-header [navComp]="nav"></main-header>
<main-nav #nav></main-nav>

<div id="main-content" [class.hideNav]="isOpen">
  <main [@fadeAnimation]="getRouterOutletState(o)">
    <router-outlet #o="outlet"></router-outlet>
  </main>
</div>

我打算尝试做什么...

layout.component.html

<main-header [navComp]="nav"></main-header>
<main-nav #nav></main-nav>

<div id="main-content" [class.hideNav]="isOpen">
  <main [@fadeAnimation]="getRouterOutletState(o)">
    <router-outlet #o="outlet" name="public"></router-outlet>
    <router-outlet #o="outlet" name="secure"></router-outlet>
  </main>
</div>

和

const routes: Routes = [

  { path: '', component: PublicComponent, outlet: 'public', data: { title: 'Public Views' }, children: PUBLIC_ROUTES },
  { path: '', component: SecureComponent, outlet: 'secure', data: { title: 'Secure Views' }, children: SECURE_ROUTES },

  //no layout routes
  { path: 'login', component: LoginComponent },
  //{ path: 'register', component: RegisterComponent },
  { path: '**', component: FileNotFoundComponent }
];

但是，现在不知道在哪里指向 layout.component.html？

一定要接近，但我还是错过了什么吗？

标签： angular