导出的 Angular 默认路径

Question

给定以下模块，如何创建路由，以便应用程序加载此模块时它将路由到 CComponent 并将 AComponent 加载到指定的路由器中导出搜索结果

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'}，路由器似乎在 socket 中正确加载了该组件，但是 routerLinkActive 指令似乎没有像 active 那样生效 类未添加到第一个 h3 中，并且不会将 routerLink 更新为 outlets: { 'search-results': ['a'] }允许在导航到 BComponent 后导航回 AComponent。

我尝试了上述方法的多种变体，但没有成功。

有没有办法配置路由，以便默认路由在主未命名的router-outlet和AComponent中加载CComponent code> 在命名的 search-results 路由器导出中？

Plunkr

Answer 1

当前，您正在定义基本路由的子路由，其中​​之一是 /a (将 AComponent 加载到 search-results 中的路径 导出)，但当应用程序加载时，您实际上并没有转到该路径。当您强制导航到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'
          }
       ]
      }
    ])

请注意，上面的代码片段中的顺序很重要。它将匹配空路径，重定向到子路由，并在指定的 socket 中加载您想要的组件(如您在代码中定义的那样)。