web-dev-qa-db-fra.com

Comment ajouter dynamiquement la directive [ngStyle] dans ionic 3/angular

C’est ce que j’avais et cela fonctionnait, elle était liée à la méthode progress et elle s’affichait correctement:

<div [ngStyle]="{'width.%': progress()}"></div>

Maintenant, je dois créer l'élément dynamiquement:

let myDiv = <HTMLElement>(document.createElement('div'));

mais je n'arrive pas à trouver un moyen de lier la méthode progress à mon élément créé dynamiquement.

Code utilisant renderer comme suggéré par @fatemefazli, qui ne détecte pas les modifications; il ne restitue pas lorsque les données deviennent disponibles, ni n'écoute la méthode de modification de la progression: https://stackblitz.com/edit/angular -fpyfmn

La décision de créer dynamiquement des éléments DOM provient de la nécessité d'attacher un geste de panoramique à l'aide de HammerJS , ce qui nécessite d'attacher un écouteur comme ceci:

addGestures(elem){
    var hammer = new Gesture(elem);
    hammer.listen();

    hammer.on('pan', (e) => this.Pan(e));
  }

J'ai essayé de créer un événement de publication/émetteur, mais je n'ai pas de déclencheur pour le publier.

angularionic-frameworkionic3angular-directive
9
August

Comme l'a dit TricheTriche, vous ne devriez pas accéder directement au DOM. En fait, non seulement ce n'est pas recommandé, mais cela ne fonctionnera pas pour les changements dynamiques, car il ne fonctionne plus vraiment à l'intérieur de la zone angulaire.

Ce que vous devez faire c'est: 

  1. créer un nouvel espace réservé dans votre composant actuel qui hébergera (2)
  2. créer une nouvelle directive en charge de l'écoute et du traitement des événements, ainsi que du rendu des modifications de style
  3. utilisez ComponentFactoryResolver pour injecter dynamiquement (2) dans (1)

Vérifiez plus de détails sur la page d'angular la page de chargement de composant dynamique angulaire , dans laquelle ils présentent un exemple en cours d'exécution de quelque chose de similaire à ce dont vous avez besoin

1
WebDever
constructor(public el: ElementRef, public renderer: Renderer){
    this.myDiv = <HTMLElement>(document.createElement('div'));
    renderer.setElementStyle(this.myDiv , 'width', this.progress()+'%');
}
2
Fateme Fazli

Vous n'êtes pas censé gérer le changement DOM vous-même (et l'ajout d'un élément l'est).

Même si vous utilisez le moteur de rendu, vous voulez éviter cela. 

Ce que je suggérerais, c'est d'utiliser la liaison d'événement et de données sur un élément codé en dur, comme vous l'avez fait la première fois. 

Et si vous avez vraiment besoin de créer une division pour une raison quelconque, expliquez-nous ce que vous souhaitez réaliser, car il existe probablement une solution pour vous qui ne consiste pas à toucher le DOM vous-même. 

1
trichetriche