Вложенный контент внутри шаблона компонента

Question

У меня есть компонент, называемый «select-other», и внутри у меня есть два элемента, которые мне нужно получить и распечатать внутри моего шаблона компонента «select-other».

HTML

<select-other> 
    <options> 
    <option value="one">One</option> 
    <option value="two">Two</option> 
    <option value="three">Three</option> 
    </options> 

    <other> 
    <input> 
    <button></button> 
    </other> 
</select-other> 

Компонентный декоратор

@Component({ 
    selector: 'select-other', 
    template: ` 
    <select 
     *ngIf="select !== 'other'" 
     [(ngModel)]="select" 
     class="form-control" 
    > 
     // CONTENT FROM INSIDE <OPTIONS> HERE 
     <option 
     value="other" 
     >Other</option> 
    </select> 
    // CONTENT FROM INSIDE <OTHER> HERE 
    ` 
}) 

Я понимаю, я могу использовать 'нг-контент' внутри шаблона, чтобы напечатать то, что между моими 'выбрать-другой' тег, но я немного запутался в том, как я собираюсь получать контент из разных элементов внутри и печатать их там, где я хочу в шаблоне.

Заранее спасибо.

Answer 1

вы можете использовать ng-content проекцию контента, как это:

@Component({ 
    selector: 'select-other', 
    template: ` 
     <select 
     *ngIf="select !== 'other'" 
     [(ngModel)]="select" 
     class="form-control"> 
      // CONTENT FROM INSIDE <OPTIONS> HERE 
      <ng-content select="options"></ng-content> 

      <option value="other">Other</option> 
     </select> 
     // CONTENT FROM INSIDE <OTHER> HERE 
     <ng-content select="other"></ng-content> 
    ` 
}) 

Таким образом, вы можете выбрать необходимое содержание по его селектором родительского элемента. Подробнее об этом here