多時隙轉換是否適用於Angular 2組件？

Question

假設我有兩個插槽的以下基本組件：

// my-component.component.ts
@Component({
  selector: 'my-component',
  template: `
<div class="my-component">
  <div>
    Title:
    <ng-content select="my-component-title"></ng-content>
  </div>
  <div>
    Content:
    <ng-content select="my-component-content"></ng-content>
  </div>
</div>`
})

進入第二個插槽（'my-component-content'）我想插入常規的Angular 2組件......

<div class="app">
  <my-component>
    <div class="my-component">
      <div>
        Title:
        <my-component-title>
          This is the Component title!
        </my-component-title>
      </div>
      <div>
        Content:
        <my-component-content>
          <some-regular-angular2-component></some-regular-angular2-component>
        </my-component-content>
      </div>
    </div>
  </my-component>
</div>

'some-regular-angular2-component'是某個Angular 2組件的選擇器......

@Component({
  selector:'some-regular-angular2-component'
})'

問題是'some-regular-angular2-component'永遠不會被轉換為ng-content第二個插槽......只有常規的HTML才能為我工作......對於cource我嘗試將'some-regular-angular2-component'設置為[父組件的指令，但在ng-content內部無法識別Angular 2組件......或者這對您有用嗎？

Answer 1

您需要將<ng-content></ng-content>到<my-component-content>的視圖（模板）中如果<my-component-content>不支持翻譯，則不會顯示其子項。 代碼中的<ng-content>標記僅適用於直接匹配的元素，但不適用於其子元素。

Answer 2

只是回答我的問題，是的，angular 2 transclusion支持插入Angular 2組件。 我在代碼中有愚蠢的錯字。

Answer 3

是的，它確實。 它現在稱為內容投影 。 請參閱具有多個插槽的模式對話框的此示例 。