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>

Angular 6 步进导航

Step navigation with Angular 6

javascript

angular

viewchild