Angular 6 - 多个路由器插座

Question

我想要一个Enter-comp.作为概述和基本上两个孩子comp.例如login-and register-comp.此外,我想用多个路由器插座来管理它.但"当然"它还没有奏效.它让我一扔:Error: Cannot match any routes. URL Segment: ',%20%7Boutlets:%20%7Blogin:%20%5B'login'%5D%7D%7D'

应用路由配置

const routes: Routes = [
  {path: 'stories', component: StoriesComponent},
  {path: '', component: EnterOverviewComponent, children: [
      {path: 'login', component: LoginComponent, outlet: 'login'},
      {path: 'register', component: RegisterComponent, outlet: 'register'},
    ]}
];

应用程序根

<app-navbar></app-navbar>

<router-outlet></router-outlet>
<router-outlet name="login"></router-outlet>
<router-outlet name="register"></router-outlet>

Navbar comp.

期待这里的错误.我怀疑,我称之为虚假路线:

<ul class="navbar-nav ml-auto">
  <li class="nav-item" routerLinkActive="active">
    <a class="nav-link" routerLink="/, {outlets: {login: ['login']}}">Sign In</a>
  </li>
  <li class="nav-item" routerLinkActive="active">
    <a class="nav-link" routerLink="/, {outlets: {register: ['register']}}">Register</a>
  </li>
</ul>

Answer 1

问题是您试图将辅助路由作为字符串发送。routerLink将 RHS 上的值计算为字符串。这就是为什么您会在路线中看到奇怪的字符。为了使这项工作，你需要尝试如下 -

<a [routerLink]="[{ outlets: { example: ['example1'] } }]">Example</a>

在你的情况下

 <a [routerLink]="[{ outlets: { register: ['register'] } }]">Example</a>//outletName:['route-path']

已编辑

相对于 ROOT 路由的命名子出口不起作用，似乎是一个BUG

评论部分提到了一种解决方法。

或者

您可以更改如下配置 -

{
    path: '', component: LoginComponent
 },
 {
    path: 'example1', component: ExampleComponent, outlet: 'example'
 }