Javascript 带角度6的单步导航

我需要你的帮助，因为我创建了一个导航步骤，但我不知道如何使用它。我使用viewchild，但对我来说不成功。我还尝试使用index++创建一个函数。在同一页面上显示三个组件。我不知道该怎么办。我尝试不同的事情却没有结果。但是找不到我想要的东西

观看下面的图片

步骤导航图像：

导出类NavbarComponent实现OnInit{
公共当前页面=0；
公共变更页（变更：编号）：作废{
this.currentPage+=更改；
}
thenBlock:TemplateRef | null=null；
show:boolean=true；
@ViewChild（'状态'）
primaryBlock:TemplateRef | null=null；
@ViewChild（'synthese'）
secondaryBlock:TemplateRef | null=null；
构造函数（专用路由器：路由器，专用位置：位置）{}
恩戈尼尼特（）{
}
}

配置网格

如果您需要这些步骤的实际路线，您可以在按钮下使用

假设我们的html有点像：

<div>
  <button [routerLink]="['', 'step-1']">Step 1</button>
  <button [routerLink]="['', 'step-2']">Step 2</button>
  <button [routerLink]="['', 'step-3']">Step 1</button>
</div>
<router-outlet></router-outlet>

然后在模块内的路由声明中使用它们（应用程序或其他，如果不是根模块，请使用

.forChild（路由）

）：

---

我建议您使用“角度材质”选项卡，但也可以使用*ngIf制作类似的内容：

<mat-tab-group>
  <mat-tab label="Configure">
    <ConfigureComponent></ConfigureComponent>
  </mat-tab>
  <mat-tab label="Grid State">
    <GridStateComponent></GridStateComponent>
  </mat-tab>
  <mat-tab label="Synthesis">
    <SynthesisComponent></SynthesisComponent>
  </mat-tab>
</mat-tab-group>

---

我在html代码段中看不到三个组件。但我相信，只要使用*ngIf或*ngSwitch，您就应该做得很好。你试过了吗？你的部分不需要url引用？

RouterModule.forRoot(routes)

<mat-tab-group>
  <mat-tab label="Configure">
    <ConfigureComponent></ConfigureComponent>
  </mat-tab>
  <mat-tab label="Grid State">
    <GridStateComponent></GridStateComponent>
  </mat-tab>
  <mat-tab label="Synthesis">
    <SynthesisComponent></SynthesisComponent>
  </mat-tab>
</mat-tab-group>