在 Angular 中禁用动画 2 Material

Question

我的问题是如何在 angular material 小部件中禁用按钮或复选框动画？

有一些 css 解决方案可以用 none 覆盖过渡，但它不起作用。

谢谢，

Answer 1

您可以使用 angular 4.3.1.

中介绍的 @.disabled 属性来禁用动画

将以下代码添加到您的组件

@HostBinding('@.disabled') disabled = true

或在您的 html

<div [@.disabled]="expression"></div>

这是工作 plnkr https://plnkr.co/edit/sVJM8H?p=preview

Answer 2

另一种方法是带路由导航的hackie（稍后找地方更改返回值）

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)"/>

Answer 3

试试这个：

<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>

在 Angular 中禁用动画 2 Material

Disable animation in Angular 2 Material

angular-material2

angular