angular - 如何访问 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或共享服务传递。现在您可以订阅/收听子组件中的此更改。