共享相同导航模板的Angular 7,公共路线和安全路线

时间:2019-02-25 15:54:56

标签: angular

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

我不确定如何执行此操作。我知道您可以为网点命名,但是不知道这是否需要做?

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?

要亲近,但我还缺少一些东西吗?

0 个答案:

没有答案