Блог

Главная - Вопросы по программированию - элементы внутри дочерних компонентов в Angular?

элементы внутри дочерних компонентов в Angular?

#angular

#angular

Вопрос:

Например, если бы у меня было

 <app-component>

  <posts-component>

      <h1 class="title">Lorem</h1>

  </posts-component>

</app-component>

Есть какой-нибудь Angular API для запроса этого h1 внутри <posts-component> из AppComponent?

Комментарии:

1. Лучше не использовать селекторы на основе браузера / документа. Ваш вопрос немного надуманный, потому что это немного зависит от того, как выглядит ваш posts-компонент внутренне. Без фактического кода единственным правильным ответом было бы: да, конечно, это можно сделать с помощью Angular API.

Ответ №1:

Для достижения этого вам нужно использовать класс Angular ElementRef. вот пример ниже:

ваш html выглядит следующим образом — 

   <posts-component>

      <h1 #myDOMElement class="title">Lorem</h1> *// added ref element as "myDOMElement"*

  </posts-component>

</app-component>

Внутри вашего файла component.ts —

 import { Component, ViewChild, ElementRef } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  title = "Angular ElementRef and @ViewChild Example";

  @ViewChild('myDOMElement', { static: true }) MyDOMElement: ElementRef;


  // If { static: true }
  ngOnInit() {
    console.log(this.MyDOMElement);
    this.MyDOMElement.nativeElement.innerHTML = "I am changed by ElementRef amp; ViewChild";
  }

  // if { static: false }
  ngAfterViewInit() {
    console.log(this.MyDOMElement);
    this.MyDOMElement.nativeElement.innerHTML = "I am changed by ElementRef amp; ViewChild";
  }

}

До Angular 8 нам нужно было получить ElemementRef в привязке жизненного цикла компонента ngAfterViewInit(). Но теперь мы можем присвоить static значение true и получить ссылку на элемент в компонентном перехватчике ngOnInit().

В версии 9 вы можете удалить свойство static и использовать его в ngAfterViewInit()