使用@ContentChild查询ng-Container的文本

Question

我想使用通过ng-content传递给以下组件的文本。

@Component({
  selector: 'child-component',
  template: '<ng-content></ng-content>'
})
export class ChildComponent implements AfterContentInit {
  @ContentChild('value') text: ElementRef;
  ngAfterContentInit(): void {
    // This does not work
    let value = this.text.nativeElement.nextSibling.textContent as string;
  }
}

父组件包括它：

<child-component>
  <ng-container #value>My Content</ng-container>
</child-component>

我如何获得字符串＆＃34;我的内容＆＃34;来自ContentChild？

Answer 1

let data = { "id": 1, "folders": [{ "id": 2, "folders": [{ "id": 3, "folders": [], "routes": [] }], "routes": [{ "id": 1002, "name": "Route3" }, { "id": 1003, "name": "Route4" } ] }], "routes": [{ "id": 1000, "name": "Route1" }, { "id": 1001, "name": "Route2" } ] }; function formatData(data) { if (data.folders.length) { data.folders.forEach(folder => { return formatData(folder); }); } if (data.routes.length) { data.routes.forEach(route => { data.folders.push(route); }); delete data.routes; } return data; } console.log(formatData(data));转换为注释节点，您放在其中的内容将呈现为兄弟节点，如下所示：

ng-container

变成了这样的东西：

<ng-container #value>My Content</ng-container>

因此，您可以使用nodes: [<!-- ng contentainer -->] ['My content'] 或nextSibling属性访问textContent文本：

nodeValue

Answer 2

我遇到的问题是我的内容不是静态的：

<child-component *ngFor="let content of array">
  <ng-container #value>{{ content }}</ng-container>
</child-component>

因此，在使用 AfterViewInit 生命周期钩子而不是 AfterContentInit 之后，它运行良好。 如果内容是静态的，我的问题中的代码将是正确的，正如yurzui的评论中所注意到的那样。