Angular mat-tab вернуться к первой вкладке из другого класса

Я использую mat-tab-group для создания двух вкладок, которые затем ссылаются на другие компоненты:

            <mat-tab-group>
                <mat-tab label="Notifications">
                    <app-notification-rules-container>
                    </app-notification-rules-container>
                </mat-tab>
                <mat-tab label="Create New">
                     <app-notification-account>
                     </app-notification-account>
                </mat-tab>
            </mat-tab-group>

В компоненте app-notification-account у меня есть кнопка отмены, и при ее нажатии я хочу вернуться на первую вкладку. Как вернуться к первой вкладке из другого класса компонентов?

введите здесь описание изображения


person user123456789    schedule 25.02.2021    source источник


Ответы (1)


используйте @Output в своем дочернем компоненте. это помогает, когда вы хотите передать данные из дочернего компонента в родительский. скажем, в уведомлении приложения вы обрабатываете перекрестную кнопку, поэтому при нажатии этой кнопки генерируется событие, которое будет прослушиваться родителем (где используется группа mat-tab-group), а в mat-tab- group, вы можете использовать свойство selectedIndex для изменения выбранной вкладки.

https://angular.io/guide/inputs-outputs

Итак, in-app-notification-account.ts

...
 constructor() {
   @Output() changeTab = new EventEmitter<();
   // this will emit event , which will be listened by parent
   handleCancel(){
    this.changeTab.emit(true)
  }
}

в вашем родительском компоненте, где вкладка мата используется в .html

<mat-tab-group [selectedIndex]="selectedIndex">
<mat-tab label="Notifications">
                    <app-notification-account (changeTab)="changeTab()">
                    </app-notification-account>
                </mat-tab>
    </mat-tab-group>

in .component.ts 
.. changeTab() {
   this.selectedIndex = this.selectedIndex === 1 ?0:1
  // or if you always want to go to first tab just set selectedIndex = 0
}
person prashant Jha    schedule 25.02.2021
comment
Вкладка все еще меняется на первую. Я вижу, что changeTab() вызывается, когда я нажимаю кнопку отмены, но он не возвращается на первую вкладку. Я пытался поместить this.selectedIndex = 0; в функцию changeTab(), но это не работает. - person user123456789; 25.02.2021
comment
Вы инициировали selktedIndex с 0 в основном компоненте и добавили этот selectedIndex в группу mat-tab? - person prashant Jha; 25.02.2021
comment
selectedIndex = 0, сделает первую вкладку активной вкладкой, вам придется использовать вывод в компоненте, где находится ваша отмена. - person prashant Jha; 25.02.2021
comment
Да, я добавил селктединдекс к основному компоненту и группе мат-вкладок. - person user123456789; 25.02.2021
comment
используйте @output в компоненте, где вы хотите отменить функциональность кнопки - person prashant Jha; 25.02.2021
comment
Вы можете сделать демонстрацию stackbliz? для этого? - person prashant Jha; 25.02.2021
comment
У меня это работает сейчас. Также пришлось добавить selectedIndexChange в группу mat-tab-group - person user123456789; 25.02.2021