Modèle de recouvrement angulaire

Lors de l`implémentation de la télécommande, la seule chose que nous devons nous assurer est que nous avons besoin d`accéder à la OverlayRef. Il s`agit d`une référence à la superposition (hôte du portail) qui nous permet de détacher le portail. Notez qu`il n`y a pas de décorateur @Injectable attaché à la classe ce qui signifie que nous ne pouvons pas tirer parti du système de DI pour ce service. Ceci, cependant, n`est pas une grosse affaire parce que nous allons créer manuellement une instance pour chaque superposition et donc nous n`avons pas besoin d`enregistrer un fournisseur non plus. Théoriquement, nous pourrions ouvrir plusieurs superpositions empilées les unes sur les autres où chaque superposition a sa propre télécommande. Le système DI crée des singletons par défaut. Ce n`est pas ce que nous voulons dans ce cas. Après que l`importation AlignType et OverlayService à votre composant. Nous avons également besoin de ElementRef, ComponentRef et ViewChild de @angular/Core.

Et importez votre composant qui sera dans le Popup. Si vous êtes complètement nouveau aux animations dans angulaire, s`il vous plaît consultez notre post sur les concepts de la Fondation ou jetez un oeil à nos animations Web Deep Dive avec angulaire. Ce que nous pouvons faire à la place est de tirer parti des rappels d`animation et d`introduire des flux d`événements auxquels nous pouvons souscrire. Angulaire fournit des rappels d`animation qui sont déclenchés lorsqu`une animation est démarrée et également quand elle est terminée. Alors attendez, angulaire ne peut pas rendre un morceau de contenu dynamique n`importe où dans la page? En fait, c`est possible. Prenez le composant suivant: Heureusement, angulaire a un système d`injection hiérarchique de dépendance (DI pour court) que nous pouvons tirer parti pour notre but. Pour plus d`informations sur le système DI d`angulaire, consultez ce post. Depuis Jeremy couvert en détails CDK superposition dans sa présentation, je vais rapidement passer au-dessus de la configuration de superposition.

Vous pouvez regarder CDK angulaire: le Component dev Kit par Jeremy Elbourn ici: la méthode Init ajoute le composant au DOM et à l`arborescence du composant angulaire à l`aide de DomService. Ensuite, nous montrons le modal et la superposition à l`aide de la classe. Show. Pour résoudre ce problèmes, nous pouvons utiliser un indicateur de progression. La bonne chose est que nous n`avons pas besoin d`écrire un à partir de zéro parce que le matériau angulaire fournit déjà un bel ensemble d`indicateurs de chargement, dont l`un est le . Afin de l`utiliser, nous devons ajouter le MatProgressSpinnerModule de @angular/Material aux importations de notre application: en parlant de ceux-ci ne sont pas dans le cadre de cet article. Cependant, vous pouvez les Google pour les comprendre mieux. Si vous avez une certaine expérience angulaire, il ne sera pas un problème pour les comprendre. Rappelez-vous la responsabilité de la DomService est de créer dynamiquement des composants et les ajouter/supprimer à/du DOM lui-même. ScrollStrategy prend une fonction qui retourne une stratégie de défilement.

Toutes les stratégies sont fournies par le service overlay et peuvent être consultées via la propriété scrollStrategies: dans la première partie de cette série, nous avons appris à utiliser le CDK d`angulaire pour créer notre première superposition personnalisée. En plus de cela, nous avons fait configurable, mis en œuvre un «handle» pour contrôler (par exemple, fermer) une superposition ouverte et a permis de partager des données avec le composant de superposition. Vous avez probablement élevé des matériaux angulaires n`avez-vous pas? Si vous n`avez pas, c`est une bibliothèque qui vous fournit des composants de conception de matériaux de haute qualité pour angulaire. Material Design lui-même est un langage de conception visuelle qui vise à la cohérence de l`expérience utilisateur sur toutes les plateformes et tailles d`appareils. C`est cool, mais que faire si votre entreprise a ses propres opinions sur les styles et l`aspect général et la sensation de l`interface utilisateur? Comment obtenons-nous le meilleur du matériau angulaire sans adopter le langage visuel de la conception matérielle? Cette solution ne fonctionne pas sans erreurs levées, Angular2 ignore simplement l`initialisation des deux composants.

Next Post:
Previous Post: