Угловой путь по умолчанию для розетки

Question

Учитывая следующий модуль, как я могу создать маршруты так, чтобы, когда приложение загружает этот модуль, оно направлялось в 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-outlet а также AComponent в названном search-results маршрутизатор-розетка?

Plunkr

Answer 1

В настоящее время вы определяете дочерние маршруты к базовому маршруту, один из которых /a (путь, который загружает AComponent в search-results на выходе), но на самом деле вы не идете по этому пути при загрузке приложения. Это работает, когда вы обязательно navigate на этот маршрут в вашем CComponent (который инициализируется при загрузке).

Если вы хотите, чтобы приложение изначально загружалось с (search-results):a маршрут активен, вы можете использовать redirectTo свойство в вашем определении маршрута.

В вашем случае, я бы соответствовал шаблону на начальном маршруте (пустой путь: '') и перенаправить на путь с /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'
          }
       ]
      }
    ])

Обратите внимание, что порядок важен во фрагменте выше. Он будет соответствовать пустому пути, перенаправлять на дочерний маршрут и загружать компонент, который вы хотите, в назначенную точку (как вы определили в своем коде).