我已经尝试了[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'] }}]">
它们都导致错误,如“无法匹配任何路线”。我知道“登录”路线有效,因为当我单击上方的“登录”链接时看到了它。任何建议,将不胜感激。