Angular2 - 獲取組件輕量級DOM innerHTML /子節點

Question

假設我有一個組件：

@Component({
  selector: 'foo',
  template: '<div>foo</div>'
})
export class Foo {}

我在另一個組件中使用它：

<foo>
  <h1>some inner HTML</h1>
</foo>

我怎樣才能知道Foo是否有輕量級DOM中的子元素？

我想得到<h1>some inner HTML</h1> 。

選項1 - @ContentChildren() ：這不能用於查詢任意元素; 目前只能以這種方式查詢Angular 2組件或變量（ #foo ）。 如果我可以避免，我不想將變量附加到內部元素。

選項2 - elementRef.nativeElement ：我可以將ElementRef注入Foo組件，但是當組件實例化時（在構造函數中），內部元素已被刪除，並且它將為空。 在生命周期的后期（例如ngAfterViewInit() ），內部元素將只是陰影DOM（即<div>foo</div> ）。

我失蹤的任何其他方法？

用例

為了給出我想要這樣做的一些背景，我正在創建一個具有默認模板的庫組件，如果用戶決定，可以用自定義模板替換。 所以我的默認模板如下所示：

<div *ngIf="hasTemplate"><ng-content></ng-content></div>
<div *ngIf="!hasTemplate"><!-- the default template --></div>

如果<foo>..</foo>標記內有HTML，我需要一些方法將hasTemplate設置為true 。

Answer 1

• 你可以切換到encapsulation: ViewEncapsulation.Native然后內容將在輕量級DOM中

• 你可以在<div #wrapper><ng-content><ng-content><div>周圍添加一個包裝元素，然后你可以從“shadow DOM”中獲取元素