如何在 Angular 命名出口中显示顶级路线

Question

下面的简单程序 Angular 12:

localhost:4200/a 工作正常。
localhost:4200/b 给我可怕的 无法匹配任何路由。 URL 段：'b'.

import { Component, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes } from '@angular/router';

@Component({
  selector: 'app-root',
  template: `
    <ng-container>
      <router-outlet></router-outlet>
      <hr/>
      <router-outlet name="named"></router-outlet>  
    </ng-container>
  `
})
export class AppComponent {}

@Component({
  selector: 'a',
  template: 'a here',
})
export class AComponent {}

@Component({
  selector: 'b',
  template: 'b here',
})
export class BComponent {}

const routes: Routes = [
  {
    component: AComponent,
    path: 'a'
  },
  {
    component: BComponent,
    path: 'b',
    outlet: 'named'
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

@NgModule({
  declarations: [AppComponent, AComponent, BComponent],
  imports: [BrowserModule, AppRoutingModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

最坏的情况，我可以将路由 'b' 下推一层（这也不起作用）但我更愿意将 b 保持在顶层。

Answer 1

欢迎使用 Whosebug @jay :)。

您可以在这里查看更多信息https://angular.io/

访问路由B时需要以路由器名称作为命名路由访问。你可以使用 localhost:4200/a(named:b)

如何在 Angular 命名出口中显示顶级路线

How to show a top level route in Angular named outlet

angular

angular-ui-router