Question

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

观看下面的图片

Step nav image：

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进行逐步导航

2 个答案: