Angular中组件的内容？ <FOO>含量</FOO>

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个不同的模板从app组件传递到标签组件。我认为这将使您更好地理解将数据传递给组件以及如何创建自定义组件。

  

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