我有一个使用角度材料选项卡组的角度组件。
<mat-tab-group>
<mat-tab label="First"> <app-comp1></app-comp1> </mat-tab>
<mat-tab label="Second"> <app-comp2></app-comp2> </mat-tab>
<mat-tab label="Third"> <app-comp3></app-comp3> </mat-tab>
</mat-tab-group>
在某个选项卡中,用户可以进行一些更改并保存。如果用户进行了一些更改并尝试导航到另一个选项卡而不保存,我想在导航到另一个选项卡之前要求用户确认放弃更改。
有什么办法可以做到这一点吗?
如果今天没有解决方案,那么我可以为您提供一些基于猴子修补的技巧:
模板.html
<mat-tab-group #tabs>
...
</mat-tab-group>
组件.ts
import { MatTabGroup, MatTabHeader, MatTab } from '@angular/material';
...
@Component({...})
export class AppComponent implement OnInit {
@ViewChild('tabs') tabs: MatTabGroup;
ngOnInit() {
this.tabs._handleClick = this.interceptTabChange.bind(this);
}
interceptTabChange(tab: MatTab, tabHeader: MatTabHeader, idx: number) {
const result = confirm(`Do you really want to leave the tab ${idx}?`);
return result && MatTabGroup.prototype._handleClick.apply(this.tabs, arguments);
}
}
NG 运行示例
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)