Angular로 자식 보기

1. Angular의 DOM 요소와 함께 ViewChild 사용
2. Angular의 자식 구성 요소와 함께 ViewChild 사용

@ViewChild는 Angular에서 가장 일반적으로 사용되는 데코레이터입니다. Angular를 배우면서 마주하게 되는 첫 번째 데코레이터 중 하나입니다.

@ViewChild에는 각 사용 사례에 대한 실용적인 예와 함께 이 튜토리얼에서 논의된 많은 기능이 있습니다.

@ViewChild는 뷰 쿼리를 구성하는 속성 데코레이터입니다. 뷰 DOM이 변경되고 새 자식이 선택기와 일치하면 속성이 업데이트됩니다.

지시문, DOM 요소 및 자식 구성 요소와 함께 @ViewChild를 사용할 수 있습니다. 예제에서 @ViewChild를 사용하는 방법을 이해할 수 있습니다.

다음 명령을 사용하여 새 응용 프로그램을 만들어 보겠습니다.

# angular
ng new my-app

Angular로 새 애플리케이션을 만든 후 이 명령을 사용하여 애플리케이션 디렉토리로 이동합니다.

# angular
cd my-app

이제 앱을 실행하여 모든 종속 항목이 올바르게 설치되었는지 확인하겠습니다.

# angular
ng serve --open

지시문 LanguageDirective를 만들어 보겠습니다. 이 지시문은 appLanguage 속성을 가진 요소를 찾고 Language 단어를 요소의 텍스트 앞에 추가합니다.

@angular/cli를 사용하여 지시문을 생성하거나 language.directive.ts 파일을 생성하는 두 가지 방법이 있습니다.

# Angular
ng generate directive language --skip-tests

이 명령은 language.directive.ts 파일을 만들고 app.module.ts 파일에 지시문을 추가합니다. 그리고 ElementRef와 Renderer2를 사용하여 텍스트를 다시 작성합니다.

따라서 language.directive.ts의 코드는 다음과 같습니다.

# angular
import {
  Directive,
  ElementRef,
  Renderer2
} from '@angular/core';

@Directive(
  { selector: '[appLanguage]' }
)
export class LanguageDirective {
  language = 'NodeJs';

  constructor(elem: ElementRef, renderer: Renderer2) {
    let language = renderer.createText('Language ');
    renderer.appendChild(elem.nativeElement, language);
  }
}

그리고 app.module.ts의 코드는 다음과 같습니다.

# Angular
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { LanguageDirective } from './language.directive';

@NgModule({
  imports: [BrowserModule, FormsModule],
  declarations: [AppComponent, HelloComponent, LanguageDirective],
  bootstrap: [AppComponent],
})
export class AppModule {}

구성 요소 템플릿의 텍스트를 포함하는 li에 appLanguage 속성을 추가합니다. 따라서 app.component.html의 코드는 아래와 같습니다.

# Angular
<h2>Programming Languages</h2>
<ul>
  <li appLanguage>Angular</li>
  <li appLanguage>React</li>
  <li appLanguage>React Native</li>
</ul>

출력:

요소 내용 앞의 Language라는 단어는 LanguageDirective의 인스턴스 변수에 액세스하고 해당 값으로 extraLanguage 인스턴스 변수를 설정할 수도 있습니다.

따라서 app.component.ts의 코드는 다음과 같습니다.

# Angular
import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { LanguageDirective } from './language.directive';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements AfterViewInit {
  extraLanguage!: string;

  @ViewChild(LanguageDirective)
  set appLanguage(directive: LanguageDirective) {
    this.extraLanguage = directive.language;
  }

  ngAfterViewInit() {
    console.log(this.extraLanguage); // NodeJs
  }
}

위의 코드에서 setter를 사용하여 extraLanguage 변수를 설정했습니다.

이제 초기 보기가 로드된 후 하위 구성 요소와 지시문을 사용할 수 있게 되므로 AfterViewInit 수명 주기 후크가 변수에 액세스하기를 기다리는 것을 알 수 있습니다.

출력:

위의 출력은 부모 구성 요소가 @ViewChild를 사용하여 지시문에서 값에 액세스할 수 있음을 보여줍니다.

Angular의 DOM 요소와 함께 ViewChild 사용

이 예제에서는 DOM 요소를 살펴보고 @ViewChild를 사용하여 액세스합니다. @ViewChild를 사용하면 템플릿 참조 변수를 사용하여 기본 DOM 요소에 액세스할 수 있습니다.

다음 명령을 사용하여 새 응용 프로그램을 만들어 보겠습니다.

# angular
ng new my-app

Angular로 새 애플리케이션을 만든 후 이 명령을 사용하여 애플리케이션 디렉토리로 이동합니다.

# angular
cd my-app

이제 앱을 실행하여 모든 종속 항목이 올바르게 설치되었는지 확인하겠습니다.

# angular
ng serve --open

예를 들어 app.component.html에 입력 태그가 있고 코드에 아래 표시된 #forViewChild 참조 변수가 있습니다.

# Angular
<input #forViewChild placeholder="Your favorite Programming Language">

또한 app.component.css에 CSS를 추가할 것입니다.

# Angular
p {
  font-family: Lato;
}
input {
  padding: 5px 10px;
}
label {
  font-size: 20px;
  padding-right: 10px;
}

출력:

이제 @ViewChild로 입력에 액세스하고 값을 설정할 수 있습니다. app.component.ts의 코드는 다음과 같습니다.

# angular
import { Component, ViewChild, AfterViewInit, ElementRef } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements AfterViewInit {
  @ViewChild('forViewChild') forViewChild!: ElementRef;
  ngAfterViewInit() {
    this.forViewChild.nativeElement.value = 'Angular!';
  }
}

따라서 ngAfterViewInit이 실행되면 입력 값이 변경되어 Angular!로 설정됩니다. 아래 예와 같이.

출력:

위의 예에서 볼 수 있듯이 부모 컴포넌트는 @ViewChild를 사용하여 자식 DOM 요소의 값을 설정합니다.

Angular의 자식 구성 요소와 함께 ViewChild 사용

@ViewChild를 사용하여 자식 구성 요소에 액세스하고 자식이 사용할 수 있는 메서드 또는 인스턴스 변수를 호출할 수 있습니다. 이제 Angular에서 자식 구성 요소와 함께 @ViewChild를 사용하는 방법을 이해하기 위해 예제를 살펴보겠습니다.

다음 명령을 사용하여 새 응용 프로그램을 만들어 보겠습니다.

# angular
ng new my-app

Angular로 새 애플리케이션을 만든 후 이 명령을 사용하여 애플리케이션 디렉토리로 이동합니다.

# angular
cd my-app

이제 앱을 실행하여 모든 종속 항목이 올바르게 설치되었는지 확인하겠습니다.

# angular
ng serve --open

이제 HelloComponent라는 새 구성 요소를 생성해 보겠습니다.

두 가지 방법으로 새 ​​구성 요소를 만들 수 있습니다. @angular/cli를 사용하고 다음 명령을 실행합니다.

# Angular
ng generate component hello --flat --skip-tests

이 명령어를 사용하면 hello.component.ts, hello.component.html, hello.component.css 파일이 생성됩니다. 또는 이러한 파일을 수동으로 생성할 수 있습니다.

이제 app.module.ts에 새로 생성된 구성 요소를 추가해야 합니다. app.module.ts의 코드는 다음과 같습니다.

# Angular
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

HelloComponent에 GreetingMessage 메서드를 추가하여 메시지를 반환합니다.

# Angular
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'hello',
  templateUrl: './hello.component.html',
  styleUrls: ['./hello.component.css'],
})
export class HelloComponent implements OnInit {
  constructor() {}

  GreetingMessage() {
    return 'Hello Member!';
  }

  ngOnInit(): void {}
}

이제 <hello>를 사용하여 app.component.html의 하위 구성 요소를 참조합니다. 따라서 우리의 코드는 아래와 같을 것입니다.

# Angular
<hello>It Works</hello>

@ViewChild를 사용하여 부모 구성 요소 클래스 app.component.ts에서 GreetingMessage 메서드를 호출합니다. 따라서 우리의 코드는 아래와 같을 것입니다.

# Angular
import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { HelloComponent } from './hello.component';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  @ViewChild(HelloComponent) hello!: HelloComponent;

  ngAfterViewInit() {
    console.log(this.hello.GreetingMessage());
  }
}

출력:

이 튜토리얼은 예시를 통해 다양한 상황에서 @ViewChild를 사용하는 방법을 가르쳐주었습니다.