Как получить доступ к собственному элементу, спроецированному 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, получив undefined

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 или общей службы. Теперь вы можете подписаться / прослушать это изменение в дочернем компоненте.