Angular中组件的内容？ <foo>内容</foo>答案

【问题标题】：Content of component in Angular? <foo>content</foo>Angular中组件的内容？ <foo>内容</foo>
【发布时间】：2018-06-20 08:07:47
【问题描述】：

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

假设我有 FooComponent 用于另一个组件，如下所示：

<foo>bar</foo>

如何在FooComponent 中提取bar？

试过了，但得到了val = null：

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

【问题讨论】：

【解决方案1】：

啊，找到了：

this.elementRef.nativeElement.innerHTML

然后在模板中添加：

<ng-content></ng-content>

【讨论】：

是的，你需要在模板视图中添加一个 ng-content 标签来实现这一点。这是一个合适的例子。scotch.io/tutorials/angular-2-transclusion-using-ng-content

【解决方案2】：

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

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

【讨论】：