Angular의 5가지 컴포넌트 통신 방법 소개

컴포넌트화는 Angular의 핵심 개념이므로 컴포넌트 통신이 더 자주 사용되며 매우 중요합니다.

공식 포털:

https://angular.io/guide/comComponent-interaction

https://angular.cn/guide/comComponent-interaction

관련 튜토리얼 권장 사항: "angular Tutorial"

상위-하위 구성요소 통신

키워드 입력 출력 EventEmitter ViewChild

1. 상위 구성요소가 하위 구성요소에 데이터를 전달합니다.

[입력]

속성을 바인딩하는 방법

상위 구성요소:

<!-- parentComponent -->
<app-child [name]="&#39;childName&#39;"></app-child>

하위 구성 요소:
// 하위 구성 요소는

<span>{{name}}</span>

@Input() public name:string = '';

2를 수신하기 위해 입력을 사용해야 합니다. 하위 구성 요소는 상위 구성 요소

【Output EventEmitter】

하위 구성 요소:

@Output()
public readonly childEmit: EventEmitter<T> = new EventEmitter<T>();

this.childEmit.emit(data);

상위 구성 요소:

<app-child (childEmit)="getData($event)"></app-child>

public getData(data:T): void {  }

3.ViewChild 메소드

이 메소드를 사용하면 상위 컴포넌트가 하위 컴포넌트의 데이터를 얻을 수 있을 뿐만 아니라 상위 컴포넌트가 하위 컴포넌트에 대한 변수 값을 설정할 수도 있다고 생각하기 때문입니다. , 그래서 여기서 따로 분리했습니다.

부모 컴포넌트:

<app-child **#child**></app-child>

<button (click)="**child**.print(&#39;---&#39;)">点击</button>

@ViewChild('child', { static: true })
public child!: ElementRef<HTMLElement>;

public print():void{
     if(this.child){
       // 这里得到child，可以使用child中的所有的public属性方法
       this.child.print(&#39;hello2&#39;);
     }
}

[예]

// 父组件
import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `
    <app-child #child [name]="name" (childEmit)="childClick($event)"></app-child>
    <button (click)="child.print(&#39;hello1&#39;)">调用子组件的方法1</button>
    <button (click)="print()">调用子组件的方法2</button>
  `
})

export class ParentComponent {

   public name:string = &#39;大儿子&#39;;
   @ViewChild(&#39;child&#39;, { static: true })
   public child!: ElementRef<HTMLElement>;

   public childClick(bool:Boolean):void{
      // TODO
   }

   public print():void{
      if(this.child){
        this.child.print(&#39;hello2&#39;);
     }
   }
}
/*****************************************************/
// 子组件

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

@Component({
  selector: &#39;app-child&#39;,
  template: `
    <h3 (click)="myClick()">{{name}}</h3>
  `
})

export class HeroChildComponent {
  @Input() 
  public name: string;

  @Output()
  public readonly childEmit: EventEmitter<boolean> = new EventEmitter<boolean>();

  public myClick():void{
    this.childEmit.emit(true);
  }

  public print(content:string):void{
    console.log(content);
  }
}

비부모-자식 컴포넌트 통신

1.Service

단일 케이스 모드는 실제로 양방향으로 트리거되어야 하는 변수입니다( 정보 보내기/받기), 데이터 설정 및 가져오기는 구성 요소 자체에서 처리해야 합니다.

service.ts

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

@Injectable()

export class myService {
  public info: string = '';
}

Component 1은 서비스에 정보를 전달합니다

import { Service1 } from '../../service/service1.service';
...

public constructor(
  public service: Service1,
) { }

public changeInfo():void {
  this.service.info = this.service.info + '1234';
}
...

Component 2는 service

import { Service2 } from '../../service/service2.service';
...

public constructor(
  public service: Service2,
) { }

public showInfo() {
  console.log(this.service.info);
}
...

2에서 정보를 가져옵니다. 제목(게시 및 구독)

데이터가 변경될 때 실제 게시 및 구독 모델은 구독자 응답을 받을 수도 있습니다. 구독자

제목NoNo즉시 공개. 새로운 데이터가 나오는 대로 게시하세요BehaviorSubject예. 마지막 데이터 조각 또는 초기 값 을 저장하는 것은 시간에 맞춰 해제됩니다. 새 데이터가 있으면 게시하세요ReplaySubject예. 모든 데이터를 저장 아니요 적시에 출시하세요. 새로운 데이터가 나오는 대로 게시하세요AsyncSubject예. 마지막으로 저장된 데이터는 지연된 릴리스입니다. 데이터 소스가 완성되어야 공개됩니다 기타 통신 방법 프로그래밍 소개

경로 값 전송, 브라우저 로컬 저장소(LocalStorage, SessionStorage), 쿠키.	더 많은 프로그래밍 관련 지식을 보려면	를 방문하세요! !

위 내용은 Angular의 5가지 컴포넌트 통신 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!