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

RE DUPLICATE: "Этот вопрос уже задавался и уже имеет ответ".

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

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

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

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

  <search-box [query-provider]='userFinder'> </search-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>

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

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

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

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

Источник

3 ответа

Решение

Вы можете сделать это легко с помощью ngForTemplate, вот мой подробный ответ на похожий вопрос. Пользовательский шаблон (включение без ng-содержимого) для компонента списка в Angular2.

/questions/776692/polzovatelskij-shablon-vklyuchenie-bez-ng-soderzhimogo-dlya-komponenta-spiska-v-angular2/776701#776701

Источник

В Angular2 есть

Смотрите также Angular 2 динамические вкладки с выбранными пользователем компонентами

который можно использовать как:

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

  ngAfterViewInit() {
    this.dcl.loadIntoLocation(ChildComponent, this.ref, 'child').then((cmp) => {
      cmp.instance.someProperty = 'xxx';
    });
  }
Источник

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

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

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

Источник
Другие вопросы по тегам