angular - 角度で子ルートが正しく表示されない

Question

angularでステッパーを使用していますが、ステップの1つにコンポーネントを表示する必要があります。そのコンポーネントをロードするには、ボタンをクリックする必要があります。子コンポーネントが挿入されているのがわかりますが、正しく表示されません。「Elements」タブでその要素を調べて移動すると、挿入されたコンポーネントが表示され、カーソルを合わせると、ブラウザの一番右隅が強調表示されます。ルーティングモジュールは次のとおりです。

const routes: Routes = [
  {
      path: '',
      redirectTo: 'items',
      pathMatch: 'full'
  },
  {
    path: 'items',
    component: ItemsComponent,
    pathMatch: 'full'
  },
  {
    path: 'item/:id',
    component: ItemStepperComponent,
    children: [
      {path: 'subitem', component: SubItemComponent, pathMatch: 'full'}
    ]
  },
];

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

親-stepper.html

<mat-horizontal-stepper #stepper [linear]="true">
   <mat-step *ngFor = "let step of steps; let i=index" [editable]="true">
     <button type="button" mat-raised-button (click) = "load()">Add Sub Item</button>
       <router-outlet></router-outlet>
   </mat-step>
</mat-horizontal-stepper>

親ステッパー.コンポーネント.ts

load(){
   this._route.navigate(['subitem'], {relativeTo: this._ac});
}

誰かが私がここで間違っていることを提案できれば？

注: 問題は主にマテリアル ステッパーにあることがわかりました。条件を追加すると、正しく表示されます。しかし、これの問題は、同じコンポーネントを複数回ロードすることです。誰かがよりエレガントなソリューションを提案できる場合。