javascript - 使用 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)