Угловой материал - предотвращение перемещения коврика между ступенями

Question

У меня есть mat-horizontal-stepper где я установил линейное свойство как true. Когда все шаги действительны на данный момент, я могу перейти к предыдущим шагам, щелкнув заголовок или метку. Я не хочу эту собственность.

Мне нужно перемещаться только через кнопки.

Я попытался отключить функцию указателя с:

    .mat-horizontal-stepper-header{
       pointer-events: none;
     }

но это не сработало.

Мне нужно либо прекратить навигацию, щелкнув заголовок, либо запустить функцию щелчка заголовка степпера.

Answer 1

Что вы изначально опубликовали:

.mat-horizontal-stepper-header{
    pointer-events: none;
}

работает, пока вы добавляете ::ng-deep в класс CSS. Как это:

::ng-deep .mat-horizontal-stepper-header {
    pointer-events: none !important;
}

Также убедитесь, что вы используете горизонтальный шаговый двигатель вместо вертикального. Это очевидно имеет значение при вызове соответствующего класса CSS.

Answer 2

У меня была такая же проблема, как у вас, и я сделал следующее:

1. В html я настроил [редактируемый] и [завершенный] как ложный

<mat-step [completed]="false" [editable]="false">

2. В файле.ts соответствующее действие вызовет следующее:

this.stepper.selected.completed = true; this.stepper.next();

И конечно же, включен линейный режим.

Answer 3

Чтобы получить событие в заголовке, нажмите здесь

<mat-horizontal-stepper (selectionChange)="stepClick($event)" [linear]="isLinear" #stepper="matHorizontalStepper">

В файле ts компонент -

stepClick(ev) {console.log(ev)}

Answer 4

Установить для редактирования значение false для mat-step

<mat-step editable="false"> ... </mat-step>

Answer 5

Чтобы активировать функцию при нажатии на заголовок степпера, вы можете подписаться на MatStepper.selectionChange, Он излучается при переключении шагов и дает вам информацию о предыдущем шаге и выбранном шаге.

HTML:

<mat-horizontal-stepper #stepper[linear]="true">
  <mat-step label="firstStep">
    ...
  </mat-step>
</mat-horizontal-stepper>

TS:

class ExampleComponent implements OnInit {
  @ViewChild('stepper') stepper: MatStepper;

  ngOnInit() {
    this.stepper.selectionChange.subscribe(selection => {
       console.log(selection.selectedStep)
       console.log(selection.previouslySelectedStep)
    }
 }

Когда выбранный шаг является последним, вы можете использовать это, чтобы установить editable = false на всех предыдущих этапах:

this.stepper._steps.forEach(step => step.editable = false);

Answer 6

Я пробовал это, но не сработало.

 ::ng-deep .mat-horizontal-stepper-header {
        pointer-events: none !important;
    }

Тогда я попробовал это.

.mat-step-header {
            pointer-events: none !important;
        }

Это сработало абсолютно нормально.

Благодарю вас

Answer 7

.mat-stepper-horizontal { pointer-events: none; }