Polymer 2.0 Comment créer un élément, puis importer avec Polymer.importHref et transmettre des données avec setAttribute

Question

Je crée un élément, je l'importe et lui attribue un attribut. Je veux que le code s'exécute seulement si l'élément n'a pas été importé et créé auparavant. Lorsque la fonction est appelée je reçois l'erreur suivante:

this._dialogPopUp.open is not a function 

Ce qui se passe est que this._dialogPopUp.open(); est l'exécution avant que l'élément est créé et importé. Si j'appuie sur le bouton pour la deuxième fois, le pop-up fonctionne car il a été créé et importé auparavant. Comment puis-je faire attendre que l'élément soit créé et importé, puis continuer l'exécution?

Actuellement, j'ai cette implémentation:

_loadDialogPopUp(e) { 
    let me = this; 
    if(!me._dialogPopUp){ 
    me._dialogPopUp = document.createElement('su-dialog'); 
    Polymer.importHref(this.resolveUrl('su-dialog.html'), (e) => { 
     this.root.appendChild(this._dialogPopUp); 
    }); 
    } 
    customElements.whenDefined('su-dialog').then(() => { 
    me._dialogPopUp.open(); 
    me._dialogPopUp.setAttribute('uid', this.user.uid); 
    }) 
} 

Answer 1

vous devrez vérifier si l'élément est en fait « mis à jour » avant de pouvoir utiliser ses fonctions. Heureusement, la pensée standard de cela.

customElements.whenDefined('su-dialog').then(() => { 
    this._dialogPopUp.open(); 
    this._dialogPopUp.setAttribute('uid', this.user.uid); 
}); 

pour plus de détails voir https://developers.google.com/web/fundamentals/architecture/building-components/customelements