我的问题是如何在Angular Material小部件中禁用按钮或复选框动画?
有一些CSS解决方案可以使用"none"来覆盖过渡效果,但这并不起作用。
谢谢!
我的问题是如何在Angular Material小部件中禁用按钮或复选框动画?
有一些CSS解决方案可以使用"none"来覆盖过渡效果,但这并不起作用。
谢谢!
@HostBinding('@.disabled') disabled = true
<div [@.disabled]="expression"></div>
这里是可用的 plnkr https://plnkr.co/edit/sVJM8H?p=preview
<mat-group [@.disabled]="true">
<mat-tab label="one">one</mat-tab>
<mat-tab label="two">two</mat-tab>
<mat-tab label="three">three</mat-tab>
</mat-group>
this.router.routeReuseStrategy.shouldReuseRoute = function() {
return false;
};
this.router.navigate(['your-page', nextTabIndex]);
这将与*ngIf
条件相同,但也很重要定义一个路由参数,例如:tab
{
path: 'your-path/:tab',
component: YourComponent
}
当然,你应该使用<route-outlet></route-outlet>
而且,在页面重新加载时恢复当前选项卡也是不错的。
tab: number = 0;
constructor(public router: Router, public route: ActivatedRoute) {}
ngOnInit() {
this.tab = this.route.snapshot.params['tab'];
}
onTab(event: MatTabChangeEvent) {
this.tab = event.index;
this.router.routeReuseStrategy.shouldReuseRoute = function() {
return false;
};
const url = decodeURIComponent(this.router.url);
this.router.navigate([url.substr(0, url.lastIndexOf("/")), event.index]);
}
在HTML中
<mat-tab-group [selectedIndex]="tab" (selectedTabChange)="onTab($event)"/>