Angulaire 2/4 Animation du composant hôte à l'aide des liaisons hôte, est-ce possible?

Question

J'essaie de faire disparaître un composant du composant lui-même. Je ne sais pas si c'est possible, j'essaye d'y parvenir en utilisant un HostBinding.

animations:

animations: [ 
    trigger('fade', [ 
     state('fadeIn', style({ opacity: 1 })), 
     state('fadeOut', style({ opacity: 0, visibility: 'hidden' })), 
     transition('* <=> *', [ 
      animate(250) 
     ]) 
    ]) 
] 

hôte Reliure:

HostBinding('@fade') animateComponent(state: string) { 
    return state; 
} 

L'exemple I ai est une superposition de chargement qui est un composant séparé. Lorsque le service de chargement déclenche le chargement, j'essaye de faire disparaître le composant.

Plunker Exemple:https://plnkr.co/edit/heNSZYNJErXnF8bxaCiz

Je ne sais pas si les animations que j'ai mis en place sont incorrectes ou bien ce ne peuvent être atteints avec l'utilisation de HostBinding.

Answer 1

Il y a quelques chose de mal avec votre plunker:

1. Vous devez importer le BrowserAnimationsModule de @angular/platform-browser/animations dans votre AppModule. Vous n'avez pas le @ dans le décorateur HostBinding.
2. @HostBinding vous permet essentiellement de lier une valeur (qui pourrait changer dans le cycle de vie de votre composant) à l'élément hôte, et c'est votre composant lui-même. Vous devez donc vous lier à une propriété de classe plutôt qu'à une méthode.

est ici une version de travail de vos plunker