résultat html angulaire 1,5 retour dans la fonction en utilisant un autre composant

Exemple I ont 1 « personnes » appel de composants à html comme celui-ci et ses œuvresrésultat html angulaire 1,5 retour dans la fonction en utilisant un autre composant

<html> 
    <people data="$ctrl.data" isAlive="$ctrl.status"></people> 
</html>

Mais si je veux appeler le composant personnes dans un autre composant comment ?

J'essaie cette solution, mais il ne fonctionne pas

import templateUrl from './main.html'; 

export const mainComponent = { 
    bindings: {}, 
    templateUrl, 
    controller: class MainComponent { 
     constructor() { 
      'ngInject'; 
     } 

     $onInit() { 
      this.data = { name : test } 
      this.status = 'ALIVE' 
      this.people = `<people data="${this.data}" 
          isAlive="${this.status}"> 
          </people>` 
      console.log(this.people) //this should return a html template with 
            // complete data 
     } 


    } 
};

S'il vous plaît conseiller

Source

2017-09-28 bellpiapple

Dans votre exemple, vous utilisez '' = 'templateURL./Main.html''. Où voulez-vous mettre «this.people»? –

Pourquoi voudriez-vous générer des personnes modèle de composant dans votre contrôleur? Vous pouvez simplement ajouter le composant lui-même dans le modèle de composant de votre secondaire.

E.g.

angular.module ('app', [])

.component('people', { 
    template:'<div style="color:green;">We are people</div>' 
}) 

.component('alien',{ 
    template:`<div style="color:red">We are alien but we have people</div> 
        <people></people>` 
})

Mise à jour

Vous pouvez simplement transmettre des données à votre droite composant après que vous l'obtenez de votre lib externe.

.component('people', { 
    template: '<div style="color:green;">We are people, who got some {{$ctrl.data}}</div>', 
    bindings: { 
    data: '<' 
    } 
}) 


.component('alien', { 
     template: `<div style="color:red">We are alien but we have people</div> 
         <people data="$ctrl.data.async"></people>`, 
     controller: function($timeout) { 

     $ctrl = this; 

     $ctrl.data = { 
      async: null 
     } 

     function getAsyncData() { 
      $timeout(() => { 
      $ctrl.data.async = "Fooooo" 
      }, 1000); 
     }; 

     getAsyncData(); 
     } 
    })

est ici un travail fiddle

Source

2017-09-28 07:59:53 Korte

Parce que j'utilise lib externe et sa fonction besoin de créer le modèle, puis envoyer à l'élément de la page – bellpiapple

Vérifiez ma mise à jour. – Korte

résultat html angulaire 1,5 retour dans la fonction en utilisant un autre composant

Répondre

Questions connexes