Angular의 구성 요소 상호 작용에 대한 자세한 설명-JS 튜토리얼-php.cn

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

青灯夜游

풀어 주다： 2021-05-07 09:46:43

앞으로

2372명이 탐색했습니다.

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

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

Angular 컴포넌트 상호 작용

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

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

서비스

【관련 추천: "angular Tutorial

"】

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

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

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

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

import { Component, Input } from &#39;@angular/core&#39;;

@Component({
  selector: &#39;app-selector&#39;,
  template: `
    // 模板代码
  `
})
export class TestComponent {
  @Input() hero: Hero;
  @Input(&#39;master&#39;) 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 &#39;@angular/core&#39;;

@Component({
  selector: &#39;app-version-child&#39;,
  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;
}

로그인 후 복사