Utilisation Typescript & Angular 2.0.0-RC.4
Comment puis-je spécifier des valeurs de propriété de style à partir du modèle afin que je puisse réutiliser des boutons? Par exemple, si je voulais spécifier une couleur de fond différente pour chaque bouton en fonction de certaines propriétés liées par le modèle. Voir ci-dessous p>
Supposez le composant suivant: P>
<h1>Animated Directive</h1> <my-toggle-button [bgColor]="'#f00'"></my-toggle-button> <my-toggle-button [bgColor]="'#0f0'"></my-toggle-button> <my-toggle-button [bgColor]="'#00f'"></my-toggle-button>
3 Réponses :
Basé sur le titre de cette question, je suppose que vous souhaitez lier les expressions à une configuration d'animation.
Peu importe que la valeur provient d'une expression de modèle en ligne ou d'une propriété reliant la classe des composants.
Dans RC4 Ce n'est pas possible, le module d'animation / moteur prend en charge statique / constante définitions . J'utilise le terme définitions et non styles puisque ces liaisons peuvent être utilisées sur des styles ainsi que clés keyframes , transitions , animate et fondamentalement toutes les usines de métadonnées d'animation.
Vous devez vous attendre à ce que cette fonctionnalité vienne dans l'une des versions suivantes de Angular, ne peut pas dire quand mais cela devrait venir. Réglage des animations métadonnées comme des variables référencées plutôt que les constantes sont super puissantes et essentiellement obligatoires, car il s'agit de la base requise pour Avoir une animation réutilisable mènera la voie à une adoption plus large de la communauté du module d'animation.
En angulaire 1, il a été construit depuis que le module d'animation utilisé des classes CSS définis dans le monde entier pour démarrer des animations ainsi que des classes CSS ont été utilisées pour la partie récupérable.
Dans Angular 2, l'approche est différente due à de nombreuses raisons (encapsulation, propre analyseur CSS, moteur d'animation non liée à CSS et plus ...)
L'animation réutilisable permettra de parcourir la voie des bibliothèques de 3e parties complètes pour les animations, pensez J'ai ouvert un problème sur le repo angulaire, il y a environ 3 semaines, demandant cette fonctionnalité. Le devillage de plomb sur l'animation a confirmé qu'il arrive tellement serré :)
Marquage correct comme la réponse est «Vous ne pouvez pas encore». Merci pour le lien avec la demande de fonctionnalité. Au moins, je peux commencer à travailler autour de la question au lieu de tenter de trouver une fonctionnalité non documentée.
Oui, "tu ne peux pas encore" c'est la réponse. Je voulais donner plus de détails sur pourquoi afin que les gens puissent comprendre. Quant à la solution de contournement, vous pourrez peut-être utiliser certains CSS, mais il sera limité. Travailler autour de cela est difficile depuis que les magasins angulaires de toutes les séquences d'animation et des données à l'intérieur d'une catégorie générée AppView interne et vous ne pouvez pas y accéder ...
comme d'aujourd'hui, vous pouvez atteindre ce que vous voulez!
Vous pouvez utiliser le calcul de la propriété automatique! p>
dans votre CSS ou votre modèle de couleur de fond sur la couleur finale. P>
animations: [
trigger('state', [
state('inactive', style({
'color': '#606060',
'background-color' : 'transparent'
})),
state('active', style({
'color': '#fff',
'background-color': '*' // <====
})),
transition('inactive <=> active', animate('100ms ease-out'))
])
]
Il est totalement possible de le faire depuis l'angulaire V4.2. Vous pouvez trouver des détails dans l'article " Une nouvelle vague d'animation de fonctionnalités angulaires ". Voir la section n ° 8.
Voici un échantillon de code de celui-ci:
Vous pouvez trouver Plunker si vous seriez agréable de vous aider.
J'ai édité mon message avec un PLNKR