У меня вопрос по Angular Material (с Angular 4+). Скажем, в моем шаблоне компонента я добавляю <mat-horizontal-stepper>
компонент, и на каждом шаге у <mat-step>
меня есть пошаговые кнопки для навигации по компоненту. Вот так...
<mat-horizontal-stepper>
<mat-step>
Step 1
<button mat-button matStepperPrevious type="button">Back</button>
<button mat-button matStepperNext type="button">Next</button>
</mat-step>
<mat-step>
Step 2
<button mat-button matStepperPrevious type="button">Back</button>
<button mat-button matStepperNext type="button">Next</button>
</mat-step>
<mat-step>
Step 3
<button mat-button matStepperPrevious type="button">Back</button>
<button mat-button matStepperNext type="button">Next</button>
</mat-step>
</mat-horizontal-stepper>
Теперь мне интересно, можно ли удалить кнопки с каждого шага и разместить их в другом месте <mat-horizontal-stepper>
в статической позиции или даже за пределами, <mat-horizontal-stepper>
и я могу перемещаться назад и вперед, используя код в моем файле машинописного текста компонента. Чтобы дать представление, я хотел бы, чтобы мой HTML был примерно таким
<mat-horizontal-stepper>
<mat-step>
Step 1
</mat-step>
<mat-step>
Step 2
</mat-step>
<mat-step>
Step 3
</mat-step>
<!-- one option -->
<div>
<button mat-button matStepperPrevious type="button">Back</button>
<button mat-button matStepperNext type="button">Next</button>
</div>
</mat-horizontal-stepper>
<!-- second option -->
<div>
<button (click)="goBack()" type="button">Back</button>
<button (click)="goForward()" type="button">Next</button>
</div>
источник
ViewChild
и видел, как я могу сослаться на Степпер - но вы меня опередили! Мне нравится тот факт, что вы также добавили функцию отключения / включения! Есть несколько очков!ViewChild
также хороший вариант приобрести степпер. Но я бы предпочел передать идентификатор. Я также добавилViewChild
решение в демо \ o /@ViewChild('stepper', {static: false}) private myStepper: MatStepper;
Angular это значение по умолчанию будет false в ссылкеВ дополнение к @ Faisal ответу , это мой подход к тому, чтобы заставить MatStepper прыгать без необходимости передавать степпер в аргументах.
Это полезно, когда вам нужно больше гибкости в управлении шаговым двигателем, например, от a
Service
или чего-то еще.HTML:
Файл TS:
Вот демонстрация stackblitz .
источник
Если вы хотите программно перейти к следующему шагу и если вы используете линейный шаговый двигатель , выполните следующие шаги:
stepper
вот так:<mat-horizontal-stepper linear #matHorizontalStepper>
mat-step
так:<mat-step [completed]="isThisStepDone">
mat-step
создайте кнопку, чтобы перейти к следующему шагу, например:<button (click)="next(matHorizontalStepper)">NEXT STEP</button>
.ts
файле объявитеMatStepper
ссылку с именем stepper :@ViewChild('matHorizontalStepper') stepper: MatStepper;
.ts
файле инициализируйтеisThisStepDone
как false :isThisStepDone: boolean = false;
Затем напишите метод для кнопки СЛЕДУЮЩИЙ ШАГ с именем
next()
:источник
setTimeout()
) требуется из-за распространения состояния черезisThisStepDone
.Вы также можете сделать это, указав фактический индекс шагового двигателя с помощью selectedIndex.
stackblitz: https://stackblitz.com/edit/angular-4rvy2s?file=app%2Fstepper-overview-example.ts
HTML:
TS:
источник
@ViewChild('stepper') private myStepper: MatStepper;
иthis.matStepper.next();
в своей функции. Работает отлично