Angular 6 - 多个路由器插座
Angular 6 - multiple router outlets
我想要一个 Enter-comp。作为概述,基本上是两个子组件。例如登录和注册组件。此外,我想用多个路由器插座来管理它。但是 "of course" 它还没有用。它让我不断投掷: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>
导航栏组件
期待这里的错误。我怀疑我调用了错误的路线:
<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']
已编辑
相对于 ROOT 路由的命名子出口不起作用,看起来像 BUG
comments section 中提到了解决方法。
或
您可以像下面这样更改配置 -
{
path: '', component: LoginComponent
},
{
path: 'example1', component: ExampleComponent, outlet: 'example'
}
请参考下面的例子
import { Component, NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
@Component({
selector: 'my-app',
template:
`<a routerLink='A'>A</a>
<a routerLink='B'>B</a>
<br>
<a [routerLink]='[{ outlets: { secondRouter: ["C"] } }]'>C</a>
<a [routerLink]='[{ outlets: { secondRouter: ["D"] } }]'>D</a>
<router-outlet></router-outlet>
<router-outlet name='secondRouter'></router-outlet>`,
})
export class AppComponent {}
/***** fitst router */
@Component({
selector: 'app-a',
template: '<h1>A</h1>',
})
export class AComponent {}
@Component({
selector: 'app-b',
template: '<h1>B</h1>',
})
export class BComponent {}
/****** second router */
@Component({
selector: 'app-c',
template: '<h1>C</h1>',
})
export class CComponent {}
@Component({
selector: 'app-d',
template: '<h1>D</h1>',
})
export class DComponent {}
const routes: Routes = [
{ path: 'A', component: AComponent },
{ path: 'B', component: BComponent },
{ path: 'C', component: CComponent, outlet: 'secondRouter' },
{ path: 'D', component: DComponent, outlet: 'secondRouter' }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class RootRoutingModule { }
我想要一个 Enter-comp。作为概述,基本上是两个子组件。例如登录和注册组件。此外,我想用多个路由器插座来管理它。但是 "of course" 它还没有用。它让我不断投掷: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>
导航栏组件
期待这里的错误。我怀疑我调用了错误的路线:
<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']
已编辑
相对于 ROOT 路由的命名子出口不起作用,看起来像 BUG
comments section 中提到了解决方法。
或
您可以像下面这样更改配置 -
{
path: '', component: LoginComponent
},
{
path: 'example1', component: ExampleComponent, outlet: 'example'
}
请参考下面的例子
import { Component, NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
@Component({
selector: 'my-app',
template:
`<a routerLink='A'>A</a>
<a routerLink='B'>B</a>
<br>
<a [routerLink]='[{ outlets: { secondRouter: ["C"] } }]'>C</a>
<a [routerLink]='[{ outlets: { secondRouter: ["D"] } }]'>D</a>
<router-outlet></router-outlet>
<router-outlet name='secondRouter'></router-outlet>`,
})
export class AppComponent {}
/***** fitst router */
@Component({
selector: 'app-a',
template: '<h1>A</h1>',
})
export class AComponent {}
@Component({
selector: 'app-b',
template: '<h1>B</h1>',
})
export class BComponent {}
/****** second router */
@Component({
selector: 'app-c',
template: '<h1>C</h1>',
})
export class CComponent {}
@Component({
selector: 'app-d',
template: '<h1>D</h1>',
})
export class DComponent {}
const routes: Routes = [
{ path: 'A', component: AComponent },
{ path: 'B', component: BComponent },
{ path: 'C', component: CComponent, outlet: 'secondRouter' },
{ path: 'D', component: DComponent, outlet: 'secondRouter' }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class RootRoutingModule { }