04 컴포넌트 상호작용 02

설정자로 입력 프로퍼티 변경 가로채기

입력 프로퍼티 설정자를 사용하여 부모로부터의 값을 가로채서 처리합니다.

자식 NameChildComponent에서 name입력 프로퍼티의 설정자는 이름에서 공백을 제거하고 빈 값을 기본 텍스트로 바꿉니다.

component-interaction/src/app/name-child.component.ts

import { Component, Input } from '@angular/core';   @Component({   selector: 'name-child',   template: '<h3>"{{name}}"</h3>' }) export class NameChildComponent {   private _name = '';     @Input()   set name(name: string) {     this._name = (name && name.trim()) || '<no name set>';   }     get name(): string { return this._name; } }

다음은 모든 공백이 있는 이름을 포함하여 이름 변형을 보여주는 NameParentComponent입니다.

component-interaction/src/app/name-parent.component.ts

import { Component } from '@angular/core';   @Component({   selector: 'name-parent',   template: `   <h2>Master controls {{names.length}} names</h2>   <name-child *ngFor="let name of names" [name]="name"></name-child>   ` }) export class NameParentComponent {   // Displays 'Mr. IQ', '<no name set>', 'Bombasto'   names = ['Mr. IQ', '   ', '  Bombasto  ']; }