Angular でのコンポーネント通信の 5 つの方法の紹介

コンポーネント化は Angular の中核概念であるため、コンポーネント通信はより頻繁に使用され、非常に重要です。

公式ポータル:

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

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

関連チュートリアルの推奨事項: "angular チュートリアル"

親子コンポーネント通信

キーワード 入力出力イベントエミッターViewChild

#1. 親コンポーネントが子コンポーネントにデータを渡します

#[入力]

#プロパティをバインドする方法

#親コンポーネント:

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

サブコンポーネント:

// サブコンポーネントは、

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

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

2 を受信するために入力を使用する必要があります。コンポーネントが親にメッセージを送信します コンポーネントがデータを渡します

[出力イベントエミッター]

子コンポーネント:

@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.ts

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

@Injectable()

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

コンポーネント 1 はサービスに情報を送信します

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

public constructor(
  public service: Service1,
) { }

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

コンポーネント 2 はサービスから情報を取得します

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

public constructor(
  public service: Service2,
) { }

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

2、件名 (公開)サブスクリプション)

真のパブリッシュ/サブスクライブ モデルでは、データが変更されると、サブスクライバーも応答を取得できます。ここでは BehaviorSubject の例のみを示します

// Service
import { BehaviorSubject } from 'rxjs';
...
public messageSource = new BehaviorSubject<string>(&#39;Start&#39;);
public changeMessage(message: string): void {
  this.messageSource.next(message);
}

public getMessageSource(): Observable<string> {
  return this.messageSource.asObservable();
}

/////////////////////////
// 发布
...
this.messageService.changeMessage(&#39;message change&#39;);
/////////////////////////
public 
// 订阅 (记得根据需要选择是否取消订阅 unsubscribe)
this.messageService.getMessageSource().subscribe(m => {
  console.log(m);
})

4 種類のサブジェクトの比較Subject

rxjs subject

データを保存するかどうか初期値が必要かどうかデータをいつ公開するか購読者へ件名NoNo速やかに公開してください。新しいデータが利用可能になったら公開しますBehaviorSubjectはい。データの最後の部分を保存するか、初期値 は であり、時間内に公開します。新しいデータが利用可能になったらリリースしますReplaySubjectはい。すべてのデータを保存します#No の保存は その他の通信方法ルーティング値、ブラウザーのローカル ストレージ (LocalStorage、SessionStorage)、Cookie。 プログラミング関連の知識について詳しくは、

タイムリーに公開します。新しいデータが利用可能になったら公開します		AsyncSubject	はい。最後のデータ
リリースが遅れています。データ ソースが完成した場合にのみ、リリースされます。

プログラミング入門

をご覧ください。 ！

以上がAngular でのコンポーネント通信の 5 つの方法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。