Angular 6 带 2 个路由器插座

Question

如何确保至少有 2 个路由器插座并在路由级别管理它们？ 可以链接我一个工作的 jsfillde 或 stackblitz 或类似的吗？

编辑重新打开问题

应用组件 HTML

<main [@fadeInAnimation]="o.isActivated ? o.activatedRoute : ''">
    <router-outlet #o="outlet" name="main"></router-outlet>
    <router-outlet #o="outlet" name="second"></router-outlet>
</main>

应用模块

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpClientModule } from '@angular/common/http';
import { NgModule, APP_INITIALIZER } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

// components
import { AppComponent } from './app.component';
import { HomeComponent } from './components/home/home.component';

// models
import { Permissions } from '../app/models/permissions';

// guards
import { CanAccess } from '../app/guards/canaccess';
import { OtherComponent } from './components/other/other.component';
import { PageNotFoundComponent } from './components/page-not-found/page-not-found.component';

const permissions: Permissions = new Permissions();

const appRoute: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent, data: { permission: permissions }, canActivate: [CanAccess], outlet: 'main' },
  { path: 'other', component: OtherComponent, data: { permission: permissions }, canActivate: [CanAccess], outlet: 'second' },
  { path: 'pageNotFound', component: PageNotFoundComponent, data: { permission: permissions }, canActivate: [CanAccess], outlet: 'main' },
  { path: '**', redirectTo: 'pageNotFound', pathMatch: 'full' },
];

export function appConfigFactory() {
  try {
      return () => true;
  } catch (e) {
      console.log(`catch load: ${e}`);
  }
}

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    OtherComponent,
    PageNotFoundComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    RouterModule.forRoot(appRoute)
  ],
  providers: [
    CanAccess,
    {
      provide: APP_INITIALIZER,
      useFactory: appConfigFactory,
      deps: [],
      multi: true
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

错误

ERROR 错误：未捕获（在承诺中）：错误：无法匹配任何路由。网址段：“家” 错误：无法匹配任何路由。 URL 段：'home'

可以在编辑器上查看 https://stackblitz.com/edit/angular-ghusfs

谢谢

Answer 1

你可以像这样定义父子组件使用多个router-outlets。

{
        path: 'shop', component: ParentShopComponent, 
        children : [{
            path: 'hello', component: ChildShopComponent
        }]
    }

您的第一个<router-outlet> 将在应用组件中，第二个在ParentShopComponent 中，其余组件可以借给子级或父级。

但是，如果您的关系是孩子父母，请查看Named Router Outlets

例子

这是主路由器出口 这些是命名的

<div class="columns">
  <md-card>
    <router-outlet name="list"></router-outlet>
  </md-card>
  <md-card>
    <router-outlet name="bio"></router-outlet>
  </md-card>
</div>

这就是你如何使用它们

{ path: 'speakersList', component: SpeakersListComponent, outlet: 'list' }