无法在当前组件上路由组件

Question

我是 angular 的新手，正在使用路由，但遇到了从 [ 呼叫 question.component 的情况body.component 并想将其替换为 question.component 但出现错误。以下是我的代码

app-routing.module.ts

const routes: Routes = [
  {
    path: 'home', component: HeaderComponent,
    children: [
      { path: '', component: BodyComponent, outlet:'secondary'},
      { path: 'ask', component: QuestionComponent, outlet:'secondary'}
    ]
  },
];

app.component.html

<router-outlet></router-outlet>

header.component.html

<mat-toolbar class="mat-toolbars">
  <span>Header</span>
  <ng-template [ngIf]="!isLoggedIn">
    <button mat-button [matMenuTriggerFor]="menu">Login<mat-icon>login</mat-icon></button>
  </ng-template>
     <mat-menu #menu="matMenu" xPosition="before" >
        <span (click)="$event.stopPropagation();">
        </span>
  </mat-menu>
</mat-toolbar>
<div id="contentwrapper">
   <div class="main_content">
     <router-outlet name="secondary"></router-outlet>
   </div>
</div>

body.component.html

每当我点击询问按钮时，它不会将 question.component 路由到 body.component

<mat-card class="card-container">
<button mat-raised-button color="success" [routerLink]="['ask']" skipLocationChange> <mat-icon>speaker_notes</mat-icon> Ask Question</button>
</mat-card>

错误

core.js:9110 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'home/ask'
Error: Cannot match any routes. URL Segment: 'home/ask'
    at ApplyRedirects.noMatchError (router.js:3387)
    at CatchSubscriber.selector (router.js:3351)

Answer 1

您已将 ask 路径的插座设置为辅助插座，因此您可能尚未添加辅助插座

 <router-outlet name="secondary"></router-outlet>

并像这样使用 link


<mat-card class="card-container">
<button mat-raised-button color="success" [routerLink]="[{ outlets: { secondary: ['ask'] } }]" skipLocationChange> <mat-icon>speaker_notes</mat-icon> Ask Question</button>
</mat-card>

勾选这个POST

Child Routes Angular

angular-router-series-secondary-outlets

无法在当前组件上路由组件

unable to route component over current component

angular-routing

angular

angular8