angular - Angular中组件的内容？内容

Question

如何获取当前组件的内容？

假设我FooComponent在另一个组件中使用了它，如下所示：

<foo>bar</foo>

我如何bar提取FooComponent？

试过这个，但得到val = null：

ngAfterViewInit() {
    console.info('val =', this.elementRef.nativeElement.value);
}

Answer 1

啊，找到了：

this.elementRef.nativeElement.innerHTML

并在模板中添加：

<ng-content></ng-content>

Answer 2

我为您创建了一个 stackblitz，其中我创建了一个选项卡组件，该选项卡组件有 3 个选项卡，并且我将 3 个不同的模板从应用程序组件传递到选项卡组件。我认为这将使您更好地了解将数据传递给组件以及如何创建自定义组件。

https://stackblitz.com/edit/angular-ck6nch?file=app%2Fapp.component.ts