如何访问 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>

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

我尝试使用模板变量（在 ContentChild 中传递变量名称）并尝试从 ngAfterContentInit 获取未定义的形式访问它

Answer 1

您可以执行以下操作：

• .html

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

• .ts

  @ViewChild('myDiv', {static: false}) div: ElementRef;
  
  ngAfterViewInit() {
      // now access div here
      console.log(this.div.nativeElement);
  }
  

myDiv此处，使用 @ViewChild 指令获取对该变量的引用。组件的视图初始化后，您将在ngAfterViewInit().

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