使用Angular 6进行步进导航

Question

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

观看下面的图片

步骤导航图像：

export class NavbarComponent implements OnInit {

  public currentPage = 0;
  public changePage(change: number): void {
    this.currentPage += change;
  }

  thenBlock: TemplateRef<DragAndDropComponent>|null = null;
  show: boolean = true;
 
  @ViewChild('state')
  primaryBlock: TemplateRef<GridStateComponent>|null = null;
  @ViewChild('synthese')
  secondaryBlock: TemplateRef<GridSyntheseComponent>|null = null;

  constructor(private router: Router, private location: Location) { }

  ngOnInit() {


  }


}

 <section class="main__container--step">
    <!-- Header & Switch -->
    <header class="mg--lg">
        <div class="flex flex--jcsb flex--aic">
            <h2 class="title title--sm title--grey title--uppercase">Configure Grid</h2>
            <form class="switchToggle flex flex--jcsb flex--aic">
                <label class="flex flex--aic" for="configure" #configure>
                    <input type="radio" name="switchtoggle" id="configure" value="configure">
                    <span><a routerLink="configure" routerLinkActive="active" ></a>Configure</span>
                </label>
                <label class="flex flex--aic" for="grid" #state>
                    <input type="radio" name="switchtoggle" id="grid" value="grid" checked="checked">
                    <span><a routerLink="state" routerLinkActive="active" ></a>Grid State</span>
                </label>
                <label class="flex flex--aic" for="synthesis" #synthese>
                    <input type="radio" name="switchtoggle" id="synthesis" value="synthesis">
                    <span><a routerLink="synthese" routerLinkActive="active" ></a>Synthesis</span>
                </label>
            </form>
            <button class="button__step" (click)="continue()" ><a href="#">Continue</a></button>
        </div>
    </header>
    <!-- End Header & Switch -->
    <!-- End Main Content -->
</section>

Answer 1

如果您需要实际路由这些步骤，您可以在按钮下使用<router-outlet></router-outlet>;

让我们说我们的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>

那么您的路由文件应该与此非常相似：

const routes: Routes = [
  {
    path: '',
    component: StepParentComponent,
    children: [
      { path: 'step-1', component: StepOneComponent },
      { path: 'step-2', component: StepTwoComponent },
      { path: 'step-3', component: StepThreeComponent },
    ]
 }
];

然后在你的模块里面的路由声明中使用它们（应用程序或其他，如果那不是根模块 - 使用.forChild(routes)）：

RouterModule.forRoot(routes)

Answer 2

我建议你使用Angular材料的标签，但你也可以用* 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>