Angular의 입력 및 출력 소개(코드 포함)

이 기사는 Angular의 입력 및 출력(코드 포함)에 대한 소개를 제공합니다. 이는 특정 참조 가치가 있으므로 도움이 될 수 있습니다.

Input은 구성 요소 내에서 입력 속성을 정의하는 데 사용되는 속성 데코레이터입니다. 실제 응용 프로그램에서는 주로 상위 구성 요소에서 하위 구성 요소로 데이터를 전송하는 데 이를 사용합니다. Angular 애플리케이션은 다양한 구성 요소로 구성됩니다. 애플리케이션이 시작되면 Angular는 루트 구성 요소에서 시작하여 전체 구성 요소 트리를 구문 분석하며 데이터는 위에서 아래로 다음 수준의 하위 구성 요소로 흐릅니다.

@Input()

counter.component.ts
import { Component, Input } from '@angular/core';
@Component({
    selector: 'exe-counter',
    template: `
      <p>当前值: {{ count }}</p>
      <button (click)="increment()"> + </button>
      <button (click)="decrement()"> - </button>
    `
})
export class CounterComponent {
    @Input() count: number = 0;
    increment() {
        this.count++;
    }
    decrement() {
        this.count--;
    }
}

app.comComponent.ts

import { Component } from '@angular/core';
@Component({
  selector: 'exe-app',
  template: `
   <exe-counter [count]="initialCount"></exe-counter>
  `
})
export class AppComponent {
  initialCount: number = 5;
}

@Input('boundPropertyName')

입력 데코레이터는 구성 요소의 바인딩 속성 이름을 지정하는 선택적 매개 변수를 지원합니다. 지정하지 않으면 기본적으로 @Input 데코레이터가 사용되며 데코레이팅된 속성 이름이 사용됩니다. 구체적인 예는 다음과 같습니다.

counter.comComponent.ts

import { Component, Input } from '@angular/core';
@Component({
    selector: 'exe-counter',
    template: `
      <p>当前值: {{ count }}</p>
      <button (click)="increment()"> + </button>
      <button (click)="decrement()"> - </button>
    `
})
export class CounterComponent {
    @Input(&#39;value&#39;) count: number = 0;
... // 其余代码未改变
}

app.comComponent.ts

import { Component } from '@angular/core';
@Component({
  selector: 'exe-app',
  template: `
   <exe-counter [value]="initialCount"></exe-counter>
  `
})
export class AppComponent {
  initialCount: number = 5;
}

setter & getter

Setter 및 getter는 속성 읽기의 일부 캡슐화를 제공하고 설정을 제한하는 데 사용됩니다. 코드를 더욱 편리하고 확장 가능하게 만들 수 있습니다. setter와 getter를 통해 외부 작업이 개인 속성에 영향을 미치지 않도록 클래스의 개인 속성을 캡슐화합니다. 또한 setter를 통해 일부 비즈니스 로직을 캡슐화할 수도 있습니다. 구체적인 예는 다음과 같습니다.

counter.comComponent.ts

import { Component, Input } from '@angular/core';
@Component({
    selector: 'exe-counter',
    template: `
      <p>当前值: {{ count }} </p>
      <button (click)="increment()"> + </button>
      <button (click)="decrement()"> - </button>
    `
})
export class CounterComponent {
    _count: number = 0; // 默认私有属性以下划线开头，不是必须也可以使用$count
    biggerThanTen: boolean = false;
    @Input()
    set count (num: number) {
        this.biggerThanTen = num > 10;
        this._count = num;
    }
    get count(): number {
        return this._count;
    }
    increment() {
        this.count++;
    }
    decrement() {
        this.count--;
    }
}

ngOnChanges

데이터 바인딩 입력 속성의 값이 변경되면 Angular는 ngOnChanges 메서드를 적극적으로 호출합니다. . 이는 바인딩된 속성의 새 값과 이전 값을 포함하는 SimpleChanges 개체를 가져옵니다. 이는 주로 구성 요소 입력 속성의 변경 사항을 모니터링하는 데 사용됩니다. 구체적인 예는 다음과 같습니다.

import { Component, Input, SimpleChanges, OnChanges } from '@angular/core';
@Component({
    selector: 'exe-counter',
    template: `
      <p>当前值: {{ count }}</p>
      <button (click)="increment()"> + </button>
      <button (click)="decrement()"> - </button>
    `
})
export class CounterComponent implements OnChanges{
    @Input() count: number = 0;
    ngOnChanges(changes: SimpleChanges) {
        console.dir(changes[&#39;count&#39;]);
    }
    increment() {
        this.count++;
    }
    decrement() {
        this.count--;
    }
}

위 예에서 입력 속성의 값이 수동으로 변경되면 ngOnChanges 후크가 트리거되지 않는다는 점에 유의해야 합니다.

Output은 구성 요소 내에서 출력 속성을 정의하는 데 사용되는 속성 데코레이터입니다. 앞서 우리는 입력 데코레이터의 역할을 소개했으며 애플리케이션이 시작될 때 Angular가 루트 구성 요소에서 시작하여 전체 구성 요소 트리를 구문 분석하고 데이터가 위에서 아래로 다음 수준의 하위 구성 요소로 흐른다는 것도 배웠습니다. 오늘 소개한 Output 데코레이터는 이벤트 형태로 부모 컴포넌트에 정보를 알리기 위해 자식 컴포넌트를 구현하는 데 사용됩니다.

Output 속성 데코레이터를 소개하기 전에 먼저 EventEmitter 뒤에 있는 영웅을 소개하겠습니다. 사용자 정의 이벤트를 트리거하는 데 사용됩니다. 구체적인 사용 예는 다음과 같습니다.

let numberEmitter: EventEmitter<number> = new EventEmitter<number>(); 
numberEmitter.subscribe((value: number) => console.log(value));
numberEmitter.emit(10);

Angular에서 EventEmitter의 적용 시나리오는 다음과 같습니다.

하위 명령은 EventEmitter 인스턴스를 생성하고 이를 출력 속성으로 내보냅니다. 하위 명령어는 생성된 EventEmitter 인스턴스에서 Emit(payload) 메서드를 호출하여 이벤트를 트리거합니다. 상위 명령어는 이벤트 바인딩(eventName)을 통해 이벤트를 수신하고 $event 객체를 통해 페이로드 객체를 얻습니다. 조금 추상적이라고 느껴진다면 바로 실천해 보도록 하겠습니다.

@Output()

counter.component.ts
import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
    selector: 'exe-counter',
    template: `
      <p>当前值: {{ count }}</p>
      <button (click)="increment()"> + </button>
      <button (click)="decrement()"> - </button>
    `
})
export class CounterComponent {
    @Input() count: number = 0;
    @Output() change: EventEmitter<number> = new EventEmitter<number>();
    increment() {
        this.count++;
        this.change.emit(this.count);
    }
    decrement() {
        this.count--;
        this.change.emit(this.count);
    }
}

app.comComponent.ts

import { Component } from '@angular/core';
@Component({
  selector: 'exe-app',
  template: `
   <p>{{changeMsg}}</p> 
   <exe-counter [count]="initialCount" 
    (change)="countChange($event)"></exe-counter>
  `
})
export class AppComponent {
  initialCount: number = 5;
  changeMsg: string;
  countChange(event: number) {
    this.changeMsg = `子组件change事件已触发，当前值是: ${event}`;
  }
}

@Output('boundPropertyName')

출력 데코레이터는 구성 요소의 바인딩 속성 이름을 지정하는 선택적 매개 변수를 지원합니다. 지정하지 않으면 기본적으로 @Output 데코레이터가 사용되며 데코레이팅된 속성 이름이 사용됩니다. 구체적인 예는 다음과 같습니다.

counter.comComponent.ts

import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
    selector: 'exe-counter',
    template: `
      <p>当前值: {{ count }}</p>
      <button (click)="increment()"> + </button>
      <button (click)="decrement()"> - </button>
    `
})
export class CounterComponent {
    @Input() count: number = 0;
    @Output(&#39;countChange&#39;) change: EventEmitter<number> = new EventEmitter<number>();
... // 其余代码未改变
}

app.comComponent.ts

import { Component } from '@angular/core';
@Component({
  selector: 'exe-app',
  template: `
   <p>{{changeMsg}}</p> 
   <exe-counter [count]="initialCount" 
    (countChange)="countChange($event)"></exe-counter>
  `
})
export class AppComponent {
  initialCount: number = 5;
  changeMsg: string;
  countChange(event: number) {
    this.changeMsg = `子组件change事件已触发，当前值是: ${event}`;
  }
}

양방향 바인딩

양방향 바인딩을 소개하기 전에 먼저 요구 사항에 대해 이야기하겠습니다. 즉, CounterComponent 하위 구성 요소 개수에서 값이 변경되면 AppComponent 상위 구성 요소의initialCount 값을 동기식으로 업데이트해야 합니다. 위의 예를 통해 AppComponent 상위 구성 요소에 있는 CounterComponent 하위 구성 요소의 변경 이벤트를 수신한 다음 변경 이벤트에서initialCount 값을 업데이트할 수 있다는 것을 알고 있습니다. 구체적인 예는 다음과 같습니다.

counter.comComponent.ts

import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
    selector: 'exe-counter',
    template: `
      <p>子组件当前值: {{ count }}</p>
      <button (click)="increment()"> + </button>
      <button (click)="decrement()"> - </button>
    `
})
export class CounterComponent {
    @Input() count: number = 0;
    @Output() change: EventEmitter<number> = new EventEmitter<number>();
    increment() {
        this.count++;
        this.change.emit(this.count);
    }
    decrement() {
        this.count--;
        this.change.emit(this.count);
    }
}

app.comComponent.ts

import { Component } from '@angular/core';
@Component({
  selector: 'exe-app',
  template: `
   <p>父组件当前值：{{ initialCount }}</p> 
   <exe-counter [count]="initialCount" 
    (change)="initialCount = $event"></exe-counter>
  `
})
export class AppComponent {
  initialCount: number = 5;
}

실제로 양방향 바인딩은 두 가지 단방향 바인딩으로 구성됩니다.

모델-> 데이터 바인딩

View-> 모델 이벤트 바인딩

Angular에서 []는 모델에서 뷰로의 데이터 바인딩을 구현하고, ()는 뷰에서 모델로의 이벤트 바인딩을 구현합니다. 두 가지 [()]를 결합하면 양방향 바인딩이 달성됩니다. 상자 구문에서는 바나나라고도 합니다.

[()] 구문 예

counter.comComponent.ts

import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
    selector: 'exe-counter',
    template: `
      <p>子组件当前值: {{ count }}</p>
      <button (click)="increment()"> + </button>
      <button (click)="decrement()"> - </button>
    `
})
export class CounterComponent {
    @Input() count: number = 0;
    // 输出属性名称变更： change -> countChange
    @Output() countChange: EventEmitter<number> = new EventEmitter<number>();
    ... // 其余代码未改变
}

app.comComponent.ts

import { Component } from '@angular/core';
@Component({
  selector: 'exe-app',
  template: `
   <p>父组件当前值：{{ initialCount }}</p> 
   <exe-counter [(count)]="initialCount"></exe-counter>
  `
})
export class AppComponent {
  initialCount: number = 5;
}

위에서 볼 수 있듯이 [(modelName)]은 modelName과 modelNameChange의 두 부분으로 나눌 수 있습니다. modelName] 입력 속성을 바인딩하는 데 사용되며, (modelNameChange)는 출력 속성을 바인딩하는 데 사용됩니다. Angular가 템플릿을 구문 분석할 때 [(modelName)] 형식의 바인딩 구문을 발견하면 이 지시문에 modelName이라는 입력 속성과 modelNameChange라는 출력 속성이 있을 것으로 예상합니다.

ngModel

Angular 1.x를 사용한 독자는 양방향 데이터 바인딩을 달성하는 데 사용하는 ng-model 지시문에 익숙해야 합니다. 그러면 Angular에 해당 명령이 있습니까? 대답은 '예'입니다. ngModel 지시어입니다.

ngModel 양방향 바인딩 예시

import { Component } from '@angular/core';
@Component({
  selector: 'exe-app',
  template: `
   <p>你输入的用户名是：{{ username }}</p> 
   <input type="text" [(ngModel)]="username" />
   `
})
export class AppComponent {
  username: string = &#39;&#39;;
}

ngModel 양식 검증 예시

import { Component } from '@angular/core';
@Component({
  selector: 'exe-app',
  styles:[
    `.error { border: 1px solid red;}`
  ],
  template: `
   <p>你输入的用户名是：{{ username }}</p>
   <input type="text" 
      [(ngModel)]="username" 
      #nameModel="ngModel" 
      [ngClass]="{error: nameModel.invalid}"
      required/>
   {{nameModel.errors | json}}
   `
})
export class AppComponent {
  username: string = &#39;&#39;;
}

위 예시에서는 @Directive 명령어의 메타데이터 정보에 importAs 속성을 사용하여 ngModel 인스턴스를 획득하고 컨트롤 상태를 획득합니다.

valid - form 값이 유효함

pristine - 양식 값이 변경되지 않음

dirty - 양식 값이 변경됨

touched - 양식을 방문함

손대지 않음 - 양식에 액세스하지 않았습니다

위 내용은 Angular의 입력 및 출력 소개(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!