Пошаговая навигация с Angular 6 - PullRequest
Новая
       14

Пошаговая навигация с Angular 6

0 голосов
/ 12 сентября 2018

Мне нужна ваша помощь, потому что я создал шаг навигации, но я не знаю, как его использовать. Я использую viewchild, но для меня это неудачно. Я также пытался создать функцию с индексом ++. Есть три компонента для отображения на одной странице. Я не знаю, чтобы сделать. Я пробую разные вещи без результата. Но невозможно найти то, что я хочу.

Смотрите изображение ниже

Step nav image:
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>

Ответы [ 2 ]

0 голосов
/ 12 сентября 2018

Я бы порекомендовал вам использовать вкладки угловых материалов, но вы также можете сделать что-то подобное с помощью * 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>
0 голосов
/ 12 сентября 2018

Если вам нужна фактическая маршрутизация для этих шагов, вы можете использовать <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)
...