Angular 6 – 多个路由器插座

我想要一个Enter-comp.作为概述和基本上两个孩子comp.例如login-and register-comp.此外,我想用多个路由器插座来管理它.但“当然”它还没有奏效.它让我不停：错误：无法匹配任何路线.网址细分：’,{outlets：{login：[‘login’]}}’

应用路由配置

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>

解决方法

问题是您正在尝试将辅助路线作为字符串发送. routerLink将RHS上的值评估为字符串.这就是你在路线上看到奇怪角色的原因.要使这项工作,你需要尝试如下 –

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

在你的情况下

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

EDITED

相对于ROOT路线的命名儿童出口不起作用,看起来像BUG

comments section中提到了一种解决方法.

要么

你可以改变下面的配置 –

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

Angular 6 – 多个路由器插座

解决方法

猜你在找的Angularjs相关文章