子路线未正确显示角度

Question

我正在使用角度步进器，我需要在其中一个步骤中显示一个组件。我需要单击一个按钮来加载该组件。我可以看到子组件被插入，但它没有正确显示。当我检查并转到“元素”选项卡中的该元素时，我可以看到插入的组件，当我悬停时，浏览器会在最右边突出显示。这是路由模块：

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
  ]
})

parent-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>

parent-stepper.component.ts

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

如果有人可以建议我在这里做错了什么？

注意：我发现问题主要出在 Material stepper 上。如果我添加一个条件，那么它会正确显示。但是这样做的问题是它多次加载相同的组件。如果有人可以提出更优雅的解决方案。

Answer 1

如果您有子组件，您需要添加它的父组件，即 ItemStepperComponent html。它从它的 html 文件中呈现它的子路由器。

Answer 2

试试这个代码你的问题会解决

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {MainComponent} from './main/main.component';
import {Test1Component} from './test1/test1.component';
import {Test2Component} from './test2/test2.component';
import {Test3Component} from './test3/test3.component';
import {Test4Component} from './test4/test4.component';


const routes: Routes = [
  {path:'',redirectTo:'main', pathMatch:'full'},
  {
    path:'main', component:MainComponent,
    children: [
      { path:'',redirectTo:'Test1',pathMatch:'full'},
      { path:'Test1',component:Test1Component },
      { path:'Test2',component:Test2Component },
      { path:'Test3',component:Test3Component },
      { path:'Test4',component:Test4Component },
    ]
  },
];

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

<div align="center">
    <nav>
        <div class="ui-g">
            <div class="ui-g-3" style="float:left; width:13%;">
                <div>
                    <a routerLink="Test1" routerLinkActive="active">Test1</a>
                </div>
            </div>
            <div class="ui-g-3" style="float:left; width:13%;">
                <div>
                    <a routerLink="Test2">Test2</a>
                </div>
            </div>
            <div class="ui-g-3" style="float:left; width:10%;">
                <div>
                    <a routerLink="Test3">Test3</a>
                </div>
            </div>
            <div class="ui-g-3" style="float:left; width:10%;">
                <div>
                    <a routerLink="Test4">Test4</a>
                </div>
            </div>
        </div>
    </nav>
</div>
    <router-outlet></router-outlet>