Question

我的问题是我们如何禁用角度材质小部件中的按钮或复选框动画？

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

谢谢，

Answer 1

您可以使用角色4.3.1中引入的@ .disabled属性禁用动画。

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

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

或在你的HTML中

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

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

的工作原理

Answer 2

尝试：

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

Answer 3

另一种方法是使用路线导航的hackie（稍后找一个地方来改变返回值）

BB =/= DD

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

并在html中

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]);
}

在Angular 2 Material中禁用动画

3 个答案: