Question

错误：无法匹配任何路由。 URL段：嵌套路由器出口时为“ builder”

Angular 8尝试创建嵌套的路由器-出口路由

______________________________________________
Routing:
const routes: Routes = [
  {
    path: '', canActivate: [AuthGardGuard], component: HomeComponent , children: [
      {path: 'builder', component: ViewBuilderComponent, outlet: 'builder'},
      {path: 'settings', component: SettingsComponent, outlet: 'builder'},
    ]
  },
  {path: 'login', component: LoginComponent}
];
_________________________________________________
Main outlet 
<router-outlet></router-outlet>
________________________________________________
HomeComponent:
<div>
<a [routerLink]="['settings']"
         routerLinkActive="active-link"><mat-icon svgIcon="tune"></mat-icon> <span class="">settings</span></a>
<a [routerLink]="['builder']"
         routerLinkActive="active-link"><mat-icon svgIcon="tune"></mat-icon> <span class="">builder</span></a>
<div class="router">
    <router-outlet name="builder"></router-outlet>
  </div>
</div>

Result is  Cannot match any routes. URL Segment: 'builder'
or Cannot match any routes. URL Segment: 'settings'

Answer 1

您需要在routerLink指令中明确指定 secondary 出口名称。所以

[routerLink]="[{ outlets: { builder: ['settings'] }}]"
[routerLink]="[{ outlets: { builder: ['builder'] }}]"

或者，如果这不符合您的需求或无法正常工作

[routerLink]="['', { outlets: { builder: ['settings'] }}]"
[routerLink]="['', { outlets: { builder: ['builder'] }}]"

错误：无法匹配任何路线。 URL段：嵌套了路由出口的{builder}

1 个答案: