如何访问ng-content投射的原生元素

Question

这是我的父组件html

<app-card>
  <div class="body">This is body</div>
  <div class="title">This is title</div>
</app-card>

这是我的CardComponent

<div class="card">
            <ng-content  select=".title"></ng-content>
            <ng-content select=".body"></ng-content>
</div>

所以我想在CardComponent中访问这个元素(<div class="body">This is body</div>)，如果它是一个组件，我可以通过ContentChild访问它，但是如何访问它呢？

我尝试使用模板变量(在ContentChild中传递变量名)，并尝试从未定义的ngAfterContentInit中访问它

Answer 1

您可以执行以下操作：

• .html

<div #myDiv class="body">This is body</div>

• .ts

@ViewChild('myDiv'，{static: false}) div: ElementRef；ngAfterViewInit() { //现在访问div此处console.log(this.div.nativeElement)；}

在这里，通过使用@ViewChild指令获取对变量myDiv的引用。一旦组件的视图初始化，您将在ngAfterViewInit()中拥有相应的元素。

可以使用EventEmitter或共享服务传递this.div值。现在，您可以在子组件中订阅/侦听此更改。