Использование содержание шаблона компонента в угловом 2

Question

RE ДУБЛИКАТ: «Этот вопрос был задан до и уже есть ответ.»

Так что этот вопрос был спросил 10 дней после я спросил его? Кто-то не знает, как читать метки времени.

---

я борюсь с угловыми 2 затрудняя или даже невозможно сделать то, что было тривиальным в угловых 1, особенно без тонны лишнего кода и/или узлов DOM. :(

В Angular 1 У меня был контроль запроса, который выполнял сложную обработку нажатий клавиш в окне ввода и динамически отображал результаты в выпадающем списке. Элементы, которые искали, могли быть любого типа, а элементы выпадающего списка могли бы быть . простые строки или сложные встроенные шаблоны

Например, я мог бы использовать это запрос список объектов пользователя и отображать их с помощью шаблона по умолчанию (например, toString):

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

Где-то еще у меня есть подобный поиск , но я хочу, чтобы результирующий список содержал более богатый обзор каждого пользователя, поэтому я предоставляю emplate рядный, как ребенок поисковой коробки:

<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> 

Моя реализации поиск поля необходимо определить, есть ли содержание ребенка использовать в качестве шаблона и использовать его в правильном месте в поисково- box шаблон.

@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>` 
    ... 

С угловыми 1 я мог легко transclude шаблон ребенка к этому месту и привязать его к соответствующему объема, или я мог бы динамически скомпилирован шаблон. Я не могу заставить это работать в Angular 2 вообще.

Если я использую <ng-content>, оно появляется только в первом <li>.

Answer 1

Вы можете сделать это легко с ngForTemplate, вот мой подробный ответ на аналогичный вопрос Custom template(transclusion without ng-content) for list component in Angular2

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

Answer 2

В Angular2 есть

• DynamicComponentLoader (Plunker example)

Смотрите также Angular 2 dynamic tabs with user-click chosen components

, которые могут быть использованы, как:

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 и ViewContainerRef (Plunker example не создана мной, я надеюсь, что создатель не возражает)

Answer 3

Я сделал несколько тестов, и это, кажется, не поддерживается. Ниже не работает:

@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> 
    ` 
}) 

Даже с template синтаксиса для петель.

Это работает, однако, при предоставлении контента.Возможно, это может быть обходным путем для вас.

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

Смотрите plunkr я использовал для моих тестов: https://plnkr.co/edit/a06vVP?p=preview.

Я также видел вопрос относительно этого (и слот):

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