插座

时间:2018-01-16 14:02:36

标签: angular angular-routing angular-router angular-router-loader

给定以下模块,如何创建路由,以便在应用程序加载此模块时,它将路由到CComponent并在指定的路由器出口AComponent中加载search-results

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';

import { AComponent } from './a.component';
import { BComponent } from './b.component';
import { CComponent } from './c.component';

@NgModule({
  declarations: [
    AComponent,
    BComponent,
    CComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot([
      {
        path: '',
        pathMatch: 'prefix',
        component: CComponent,
        children: [
          {
            path: 'a',
            component: AComponent,
            outlet: 'search-results'
          },
          {
            path: 'b',
            component: BComponent,
            outlet: 'search-results'
          }
       ]
    ])
  ],
  providers: [],
  bootstrap: [CComponent]
})
export class AppModule {}

a.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'a-component',
  template: `
      <div class="tabs row">
        <h3 [routerLink]="[{ outlets: { 'search-results': ['a'] } }]" class="tab" routerLinkActive="active">
          A
        </h3>
        <h3 [routerLink]="[{ outlets: { 'search-results': ['b'] } }]" class="tab" routerLinkActive="active">
          B
        </h3>
      </div>
    <router-outlet name="search-results"></router-outlet>
  `
})
export class AComponent {
}

我尝试了很多不同的路线:

使用上述配置,页面加载,但AComponent未加载到屏幕上。

如果我更新CComponent以获得以下内容:

export class CComponent {
  constructor(
    private route: ActivatedRoute,
    private router: Router
  ) {
    router.navigate(
      [
        {
          outlets: {
            'search-results': ['a']
          }
        }
      ], { relativeTo: route });
  }
}

然后一切似乎都有效,但是必须在父元素的构造函数中触发导航似乎是错误的。

如果我更新子路由并将{ path: 'a', component: AComponent, outlet: 'search-results' }替换为{ path: '', component: AComponent, outlet: 'search-results' },则路由器似乎在插座中正确加载该组件,但routerLinkActive指令似乎不是生效,因为active类未添加到第一个h3,将routerLink更新为outlets: { 'search-results': ['a'] }并不允许导航回AComponent之后导航到BComponent

我已经尝试过多种变体,但都没有成功。

是否有办法配置路由,以便默认路由将在命名为CComponent路由器的主要未命名router-outletAComponent中加载search-results -outlet吗

Plunkr

1 个答案:

答案 0 :(得分:1)

目前,您正在定义到您的基本路线的子路线,其中一条是/a(将AComponent加载到search-results插座的路径),但您实际上并不是这样在应用程序加载时转到该路径。当您在navigate(在加载时进行初始化)中强制CComponent到该路线时,它会起作用。

如果您希望应用程序最初在(search-results):a路由处于活动状态时加载,则可以在路由定义中使用redirectTo property

在你的情况下,我会在初始路线上模式匹配(空路径:'')并重定向到加载/a的路径,如下所示:

RouterModule.forRoot([
      /* this line will match the initially loaded route and 
       immediately redirect to the child route 'a', which loads 
       `AComponent` into the `search-results` outlet */
      { path: '', pathMatch: 'full', redirectTo: '(search-results:a)'},

      {
        path: '',
        pathMatch: 'prefix',
        component: CComponent,
        children: [
          {
            path: 'a',
            component: AComponent,
            outlet: 'search-results'
          },
          {
            path: 'b',
            component: BComponent,
            outlet: 'search-results'
          }
       ]
      }
    ])

请注意,订单在上面的代码段中很重要。它将匹配空路径,重定向到子路径,以及在指定插座中加载所需组件(如您在代码中定义的那样)。