Как получить доступ к нативному элементу, спроецированному с помощью ng-content - PullRequest
Новая
       13

Как получить доступ к нативному элементу, спроецированному с помощью ng-content

1 голос
/ 27 января 2020

Это мой родительский компонент 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, получив неопределенное значение

1 Ответ

1 голос
/ 27 января 2020

Вы можете сделать следующее:

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

...