如何设置Angular routerLink以同时路由主插座和辅助插座

时间:2018-06-22 04:23:38

标签: angular angular-routing

我已经尝试了[routerLink]的所有可能语法,但似乎无法正常工作。这是我的路线:

const ROUTES = [
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  {
    path: 'home',
    component: HomeComponent
  },
  {
    path: 'sign-in',
    component: SignInComponent,
    outlet: 'signin'
  },
  {
    path: 'register',
    component: RegisterComponent
  },
  {
    path: 'projects',
    component: ProjectsComponent
  }
];

主模板具有:

<header class="header">
<header class="header">
    <h1>{{ title }}</h1>
    <utility-navigation></utility-navigation>
    <navigation></navigation>
    <router-outlet name="signin"></router-outlet>
</header>
<main>
    <router-outlet></router-outlet>
</main>

此链接将组件弹出到“登录”出口:

<a class="nav-link" [routerLink]="[{ outlets: { signin: ['sign-in'] } }]">Sign in</a>

此链接清空“登录”插座,并路由到主插座中的“注册”组件:

<a class="nav-link" [routerLink]="[{ outlets: { primary: ['register'], signin: null } }]">Register</a>

但是我希望当前处于/register路线的用户能够单击链接转到/home,并在辅助出口中看到“登录”路线。我尝试过:

<a [routerLink]="[{ outlets: { primary: 'home', signin: 'sign-in' }}]">

<a [routerLink]="[{ outlets: { primary: ['home'], signin: ['sign-in'] }}]">

<a [routerLink]="[{ outlets: { primary: 'home', signin: ['sign-in'] }}]">

<a [routerLink]="['/home', { outlets: { signin: ['sign-in'] }}]">

它们都导致错误,如“无法匹配任何路线”。我知道“登录”路线有效,因为当我单击上方的“登录”链接时看到了它。任何建议,将不胜感激。

0 个答案:

没有答案