web-dev-qa-db-fra.com

Désactiver l'animation dans Angular 2 matériel

Ma question est la suivante: comment désactiver l'animation de boutons ou de cases à cocher dans les widgets de matériau angulaire?

Il existe certaines solutions CSS pour remplacer la transition par aucune, mais cela ne fonctionne pas.

Merci,

angularangular-material2
9
Nav

Vous pouvez désactiver l'animation en utilisant la propriété @ .disabled qui est introduite dans angular 4.3.1 .

Soit ajouter le code ci-dessous à votre composant

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

ou dans votre html

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

Ici fonctionne plnkr https://plnkr.co/edit/sVJM8H?p=preview

13
Lokesh Daiya

essaye ça: 

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

Une autre approche est un hackie avec navigation par route (trouvez un endroit plus tard pour changer la valeur renvoyée)

this.router.routeReuseStrategy.shouldReuseRoute = function() {
    return false;
};
this.router.navigate(['your-page', nextTabIndex]);

Cela sera identique à la condition *ngIf mais il est également important de définir un paramètre de route, par exemple. :tab

{
   path: 'your-path/:tab',
   component: YourComponent
}

Et bien sûr, vous devriez utiliser <route-outlet></route-outlet>

Et aussi ça va être agréable de restaurer l'onglet actuel sur la page de rechargement

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

Et en html

<mat-tab-group [selectedIndex]="tab" (selectedTabChange)="onTab($event)"/>
0
V. Kalyuzhnyu