javascript - Angular 6 พร้อม 2 ตัวออกแบบเส้นทาง

ฉันจะทำอย่างไรให้แน่ใจว่ามี router-outlets อย่างน้อย 2 ตัวและจัดการพวกมันในระดับ routing ได้? สามารถลิงก์ไปยัง 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' ข้อผิดพลาด: ไม่สามารถจับคู่เส้นทางใด ๆ ได้ ตัวแบ่ง URL: 'home'

สามารถดูบนโปรแกรมแก้ไขได้ที่ https://stackblitz.com/edit/angular-ghusfs

ขอบคุณ

คำตอบ #1

คุณสามารถกำหนดคอมโพเนนต์พาเรนต์-ไชลด์เพื่อใช้ router-outlets หลายตัวได้ดังนี้

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

ค่า <router-outlet> แรกของคุณจะอยู่ในคอมโพเนนต์แอป และค่าที่สองจะอยู่ใน ParentShopComponent ส่วนคอมโพเนนต์ที่เหลือสามารถอยู่ในระดับลูกหรือพ่อได้

แต่ถ้าความสัมพันธ์ของคุณเป็นแบบพ่อแม่-ลูก ลองดูสิ่งนี้ที่ชื่อว่า 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' }