Angular의 구성 요소 상호 작용에 대한 자세한 설명

이 글에서는 Angular 구성 요소 상호 작용에 대해 자세히 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

Angular 컴포넌트 상호 작용

컴포넌트 상호 작용: 컴포넌트 통신을 통해 두 개 이상의 컴포넌트가 정보를 공유할 수 있습니다.
사용 시나리오: 특정 기능이 여러 구성 요소에서 사용되는 경우 특정 기능은 하위 구성 요소에 캡슐화될 수 있으며 특정 작업 또는 워크플로는 하위 구성 요소에서 처리될 수 있습니다.
상호작용 방법:

• 방법 1: @Input 및 @Output 데코레이터를 통해 상호작용합니다. @Input和@Output装饰器进行交互。
• 方式2：通过服务
방법 2: 서비스를 통해 상호작용합니다.

【관련 추천: "angular Tutorial

"】

---

상위 컴포넌트에서 하위 컴포넌트로 데이터 전송

입력 바인딩을 통해 상위 컴포넌트에서 하위 컴포넌트로 데이터 전송.
입력 속성은 @Input 데코레이터를 사용하여 설정 가능한 속성입니다.

속성 바인딩을 통해 바인딩되면 값이 속성으로 "흐릅니다".

일부 코드 예제는 다음과 같습니다.

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-selector',
  template: `
    // 模板代码
  `
})
export class TestComponent {
  @Input() hero: Hero;
  @Input('master') masterName: string;
}

위 예제에는 두 개의 입력 속성이 포함되어 있습니다. 두 번째 @Input은 하위 구성 요소의 속성 이름 masterName에 대한 별칭 마스터를 지정합니다.

상위 구성 요소에서 하위 구성 요소를 참조합니다. 일부 코드 예는 다음과 같습니다.

---

    <app-hero-child *ngFor="let hero of heroes"
      [hero] = "hero"
      [master] = "master">
    </app-hero-child>

입력 속성 값의 변경 사항을 수신합니다.

(1) setter 메서드 사용

입력 속성의 setter() 메서드 사용 , 상위 구성 요소에서 차단되었습니다. 값이 변경되고 작업이 수행됩니다.

일부 코드 예제는 다음과 같습니다.

export class TestComponent {
	
	@Input()
	set name(name: String) {
		// 逻辑处理
	}
}

(2) ngOnChanges() 메서드를 사용합니다.

OnChanges 수명 주기 후크 인터페이스의 ngOnChanges() 메서드를 사용하여 입력 속성 값의 변경 사항을 수신하고 응답합니다. 참고:

여러 대화형 입력 속성을 모니터링해야 하는 경우 속성 설정 방법을 사용하는 것보다 이 방법이 더 적합합니다.

하위 구성 요소의 @angular/core에서 입력, OnChanges 및 SimpleChange 가져오기

import { Component, Input, OnChanges, SimpleChange } from '@angular/core';

@Component({
  selector: 'app-version-child',
  template: `
  // 模板代码
  `
})
export class ChildComponent implements OnChanges {
  @Input() major: number;
  @Input() minor: number;

  ngOnChanges(changes: { [propKey: string]: SimpleChange }) {
    for (let propName in changes) {
      // propName为输入属性的名字
      let changedProp = changes[propName]; // changedProp为SimpleChange对象
      // 其它代码
    }
  }
}

SimpleChange 클래스

소스 코드는 다음과 같습니다.

---

/**
 * Represents a basic change from a previous to a new value for a single
 * property on a directive instance. Passed as a value in a
 * {@link SimpleChanges} object to the `ngOnChanges` hook.
 *
 * @see `OnChanges`
 *
 * @publicApi
 */
export declare class SimpleChange {
    previousValue: any;
    currentValue: any;
    firstChange: boolean;
    constructor(previousValue: any, currentValue: any, firstChange: boolean);
    /**
     * Check whether the new value is the first value assigned.
     */
    isFirstChange(): boolean;
}

상위 구성 요소는 하위 구성 요소의 이벤트를 수신합니다

하위 구성 요소는 EventEmitter 속성을 노출합니다. 이벤트가 발생하면 하위 구성 요소는 이 속성을 사용하여 이벤트를 방출(상향)합니다. 상위 구성 요소는 이 이벤트 속성에 바인딩되어 이벤트가 발생할 때 응답합니다.

하위 구성 요소의 EventEmitter 속성은 일반적으로 @Output 데코레이터가 있는 출력 속성입니다.

——Angular 구성 요소 간의 상호 작용

---

상위 구성 요소와 하위 구성 요소는 서비스를 통해 통신합니다.

상위 구성 요소와 하위 구성 요소는 동일한 서비스를 공유하며 이 서비스를 사용하여 구성 요소 패밀리 내에서 양방향 통신을 달성합니다.

이 서비스 인스턴스의 범위는 상위 구성 요소와 해당 하위 구성 요소로 제한됩니다. 이 구성 요소 하위 트리 외부의 구성 요소는 서비스에 액세스하거나 통신할 수 없습니다.

---

자세한 문서

자세한 문서는 Angular 컴포넌트 상호작용

의 관련 부분을 참조하세요. 더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 입문

을 방문하세요! ! 🎜

위 내용은 Angular의 구성 요소 상호 작용에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!