구성 요소 템플릿 내부에 중첩 된 내용

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> 

구성 요소 실내 장식

내가 내 '를 선택 - 다른'태그 사이에 무엇을 인쇄 템플릿 내에서 'NG-내용을'사용할 수 있습니다 이해

@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