我希望实现的是公共路线出口和安全路线出口,但是让它们都使用相同的导航模板。
我不确定如何执行此操作。我知道您可以为网点命名,但是不知道这是否需要做?
app-routing.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>
secure.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>
我要尝试做的事情...
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?
要亲近,但我还缺少一些东西吗?