Utiliser le contenu du modèle de composant dans angulaire 2

Question

RE DUPLICATE: « Cette question a été posée et a déjà une réponse. »

Donc, cette question a été a demandé 10 jours après je l'ai demandé? Quelqu'un ne sait pas lire les horodatages.

---

Je suis aux prises avec angulaire 2 ce qui rend difficile ou peut-être impossible de faire des choses qui étaient trivial dans angulaire 1, en particulier sans tonnes de code superflu et/ou des noeuds DOM. : (

En Angular 1, j'avais un contrôle de requête qui traitait les touches de manière sophistiquée dans une boîte de saisie et affichait de manière dynamique les résultats dans une liste déroulante Les éléments recherchés pouvaient être de tout type, et les éléments de la liste déroulante pouvaient être . chaînes simples ou templates en ligne complexes

Par exemple, je pourrais utiliser interroger une liste d'objets utilisateur et afficher les utiliser un modèle par défaut (par exemple toString):

<search-box [query-provider]='userFinder'> </search-box> 

ailleurs j'ai une recherche similaire , mais je veux que la liste résultante contienne une vue plus riche de chaque utilisateur, donc je fournis à ligne Emplate, comme un enfant de la recherche-box:

<search-box [query-provider]='userFinder'> 
     <!-- this is used as a template for each result item in the 
      dropdown list, with `result` bound to the result item. --> 
     <div> 
      <span class='userName'>result.name</span> 
      <span class='userAge'>result.age</span> 
      <address [model]='result.address'><address> 
     </div> 
    </search-box> 

Ma mise en œuvre de la recherche-boîte doit déterminer s'il y a un contenu enfant à utiliser comme modèle et l'utiliser au bon endroit dans la Recherche- modèle de boîte.

@Component({ 
    select: 'search-box', 
    template: ` 
     <div somestuff here> 
      <input morestuff here> 
      <ul this is where my dropdown items will go> 
       <li *ng-for="#item of model.listItems" 
        TEMPLATE FOR ITEMS SHOULD GO HERE 
       </li> 
      </ul> 
     </div>` 
    ... 

Avec angulaire 1 je pourrais facilement transclude un modèle enfant à cet endroit et le lier à la portée appropriée, ou je pourrais dynamiquement compilé un modèle. Je ne peux pas obtenir cela pour travailler dans Angular 2 du tout.

Si j'utilise <ng-content> là, il n'apparaît que dans le premier <li>.

Answer 1

Vous pouvez le faire facilement avec ngForTemplate, voici ma réponse détaillée pour une question similaire Custom template(transclusion without ng-content) for list component in Angular2

https://stackoverflow.com/a/36535521/306753

Answer 2

En Angular2 il y a

• DynamicComponentLoader (Plunker example)

Voir aussi Angular 2 dynamic tabs with user-click chosen components

qui peut être utilisé comme:

constructor(private dcl: DynamicComponentLoader, private injector: Injector, private ref:ElementRef) {} 

    ngAfterViewInit() { 
    this.dcl.loadIntoLocation(ChildComponent, this.ref, 'child').then((cmp) => { 
     cmp.instance.someProperty = 'xxx'; 
    }); 
    } 

• TemplateRef et ViewContainerRef (Plunker example pas été créé par moi, j'espère que le créateur ne me dérange pas) cela ne semble pas

Answer 3

J'ai fait quelques tests et être pris en charge. Ce qui suit ne fonctionne pas:

@Component({ 
    selector: 'sub', 
    template: ` 
    Sub component : 

    <h3>#1</h3> 

    <template ngFor #elt [ngForOf]="list"> 
     <div>{{elt}}</div> 
     <ng-content></ng-content> 
    </template> 

    <h3>#2</h3> 

    <ng-content ngFor #elt [ngForOf]="list"></ng-content> 
    ` 
}) 

Même avec la syntaxe template pour les boucles.

Cela fonctionne cependant lors de la fourniture du contenu.Cela pourrait peut-être être une solution pour vous.

@Component({ 
    selector: 'my-app', 
    template: ` 
    <sub> 
     <div>from parent</div> 
     <template ngFor #elt [ngForOf]="list"> 
     <div>{{elt}} - parent</div> 
     </template> 
    </sub> 
    `, 
    directives: [ SubComponent ] 
}) 

Voir la plunkr j'ai utilisé pour mes tests: https://plnkr.co/edit/a06vVP?p=preview.

J'ai vu aussi une question au sujet de ce (et slot):

• https://github.com/angular/angular/issues/3397