javascript - Angular 6 带 2 个路由器 socket

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 { }

错误

错误错误:未捕获( promise ):错误:无法匹配任何路由。 URL 段:“主页” 错误:无法匹配任何路由。 URL 段:'home'

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

谢谢

Answer 1

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

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

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

但是，如果您的关系是子女 parent ，请查看此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' }