오늘 ng 프로젝트를 하고 있습니다. 이전 사람들의 코드를 보면viewChild() 등 키워드가 있습니다.신출내기가 좀 의심스러우니, 차라리 자료를 찾아보고ng과 관련된 몇 개와DOM과 관련된 몇 가지 개념을 정리해 보자.

ElementRef

ng은 크로스플랫폼이기 때문에 시각층과 렌더링층의 결합을 줄이고 ng이 멀티플랫폼에 더욱 적응하도록 하기 위해 ng은 우리를 도와 ElementRef를 봉인했다. 우리는 ElementRef를 통해native 요소를 얻을 수 있다(브라우저에서 흔히 말하는DOM 요소)
다음은 코드를 보도록 하겠습니다.

    import { Component, ElementRef, AfterViewInit }  from '@angular/core';
    @Component ({
          selector:'my-app',
          template:`
              
Hello    ！
          `
    })
    export class AppComponent(){
          @ViewChild('greet')  greetDiv: ElementRef

          construcor(private elementRef: ElementRef, private renderer: Renderer)  {
    
          }
          ngAfterViewInit() {
              // 1:          ，       
              this.renderer.setElementStyle(this.greetDiv.nativeElement, 'backgroundColor',red)
            //   2:         
            this.greetDiv.nativeElement.backgroundColor='red'
          }
    }

TemplateRef && ViewContainerRef

template 자체는 HTML 탭으로 클라이언트의 내용 메커니즘을 저장하는 데 사용되며, 이 내용은 페이지를 렌더링할 때 불러오지 않지만, 실행할 때 자바스크립트에서 해석될 수 있습니다. 자세한 내용은 Template HTML Template Ref를 보십시오

    // @angular/core/src/linker/template_ref.d.ts
    //        template  ，         (EmbeddedViews)
    export declare abstract class TemplateRef {
        elementRef: ElementRef;
        abstract createEmbeddedView(context: C): EmbeddedViewRef;
    }

templateRef 아래에 추상적인 방법이 있는데 추상적인 클래스를 직접 실례화할 수 없습니다. 추상적인 클래스는 실례적인 추상화 클래스의 하위 클래스를 가지고 있어야 합니다. 모든 실례는createEmbeddedView 방법을 가지고 있습니다.
ViewContainerRef

import { Component, TemplateRef, ViewChild, ViewContainerRef, AfterViewInit } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    
Welcome to Angular World
    
  `,
})
export class AppComponent {
  name: string = 'Semlinker';

  @ViewChild('tpl')
  tplRef: TemplateRef;

  @ViewChild('tpl', { read: ViewContainerRef })
  tplVcRef: ViewContainerRef;

  ngAfterViewInit() {
    // console.dir(this.tplVcRef); (1)
    this.tplVcRef.createEmbeddedView(this.tplRef);
  }
}

TemplateRef: 내장된template 템플릿 요소를 나타내는 데 사용되며, TemplateRef 실례를 통해 내장된 보기 (Embedded Views) 를 쉽게 만들 수 있고, ElementRef를 통해 봉인된native Element에 쉽게 접근할 수 있습니다.주의해야 할 것은 구성 요소 보기에서template 템플릿 요소입니다. 렌더링을 거치면comment 요소로 바뀝니다.
ViewContainerRef: 뷰 컨테이너를 나타내는 데 사용되며 하나 이상의 뷰를 추가할 수 있습니다.ViewContainer Ref 인스턴스를 사용하여 TemplateRef 인스턴스를 기반으로 인라인 뷰를 작성하고 인라인 뷰의 삽입 위치를 지정하며 뷰 컨테이너에 있는 기존 뷰를 쉽게 관리할 수 있습니다.간단히 말해 ViewContainerRef의 주요 역할은 인라인 뷰나 어셈블리 뷰를 작성하고 관리하는 것입니다.