Angular コンポーネント間の 5 つの通信方法に関する簡単な説明-jsチュートリアル-php.cn

Angular コンポーネント間の 5 つの通信方法に関する簡単な説明

青灯夜游

リリース： 2021-08-16 10:04:04

転載

2697 人が閲覧しました

Angular コンポーネント間で通信するにはどうすればよいですか?次の記事では、Angular コンポーネント間の通信の 5 つの方法を紹介します。必要に応じて参照してください~

Angular コンポーネント間の 5 つの通信方法に関する簡単な説明

コンポーネントは angular によって構築されますプロジェクト内のコンポーネント間でデータを確実にやり取りできるようにするために、Angular はコンポーネント間の通信を実現できるいくつかのメソッドをカプセル化します。 [関連チュートリアルの推奨事項: "angular チュートリアル"]

1. 親コンポーネントは、入力バインディングを通じて子コンポーネントにデータを渡します

#親コンポーネント

parent.component.ts

age = 18;
name = &#39;  xiaoming &#39;

ログイン後にコピー

parent.component.html

<app-child-1 [age]="age" [name]="name"></app-child-1>

ログイン後にコピー

子コンポーネント child1.component.ts

@Input() age!: number;

ログイン後にコピー

入力属性値の変更のインターセプト1. 入力属性セッターを使用して、親の変更をインターセプトします。コンポーネントの値を確認してアクションを実行します。

child1.component.ts

@Input()
set name(name: string) {
    this._name = name.trim();
}
private _name: string;

ログイン後にコピー

2. ngOnChanges() フック関数を使用して、入力属性値の変更を監視し、応答します。この方法は、複数の対話型入力プロパティを監視する必要がある場合、プロパティセッターを使用するよりも適切です。

child1.component.ts

ngOnChanges(changes: SimpleChanges): void {
    console.log(changes);
}

ログイン後にコピー

SimpleChange の関連プロパティについては、angular によって公式に提供されている型記述ファイルを通じて知ることができます:

Angular コンポーネント間の 5 つの通信方法に関する簡単な説明

2. 親コンポーネントは子コンポーネントのイベントをリッスンし、子コンポーネントから親コンポーネントに渡された値を取得します。子コンポーネントは、EventEmitter (@Output (or) 属性で装飾されています) を公開します。イベントが発生すると、子コンポーネントはこの属性を使用してイベントを発行し、値を親コンポーネントに発行します。親コンポーネントはこのイベントプロパティにバインドされ、イベントが発生すると応答します。

子コンポーネント

child1.component.ts

@Output() voted = new EventEmitter<boolean>();
emitValue(): void {
    this.voted.emit(true);
}

ログイン後にコピー

child1.component.html

<button (click)="emitValue()">Click</button>

ログイン後にコピー

親コンポーネント

parent.component.html

<app-child-1 [age]="age" [name]="name" (voted)="getChildParam($event)"></app-child-1>

ログイン後にコピー

parent.component.ts

getChildParam(value: boolean): void {
    console.log(value); // true
}

ログイン後にコピー

3. 親コンポーネントは、ローカル変数 (# varibleName) 子コンポーネントのプロパティを取得し、子コンポーネントのメソッドを呼び出します

子コンポーネント

child1.component.ts

address = &#39;Shanghai&#39;;
setAddress(address: string): void {
    this.address = address;
}

ログイン後にコピー

親コンポーネント

parent.component.html

<app-child-1 [age]="age" [name]="name" (voted)="getChildParam($event)" #child1Component></app-child-1>
<div>{{child1Component.address}}</div>
<button (click)="child1Component.setAddress(&#39;Beijing&#39;)">Click</button>

ログイン後にコピー

制限: 親コンポーネントと子コンポーネントの接続はすべて、親コンポーネントのテンプレート内で作成する必要があります。親コンポーネントのクラスが子コンポーネントのプロパティ値を読み取る必要がある場合、または子コンポーネントのメソッドを呼び出す必要がある場合、ローカル変数メソッドを使用することはできません。

4. 親コンポーネントは @ViewChild

親コンポーネントのクラスが子コンポーネントのプロパティ値を読み取る必要がある場合、または子のメソッドを呼び出す必要がある場合に、親コンポーネントが @ViewChild を呼び出します。コンポーネントの場合、ローカル変数は使用できません。メソッド。そのような必要がある場合は、@ViewChild を通じて子コンポーネントを親コンポーネントに挿入できます。

#親コンポーネント

#parent.component.ts

@ViewChild(Child1Component) private child1Component!: Child1Component;

ログイン後にコピー

child1Component 変数を通じて子コンポーネントのプロパティとメソッドにアクセスできます;

5. 共有サービスを使用してコンポーネント間の通信を実現します

コンポーネント間の通信を実現するには、Rxjs の BehaviorSubject オブジェクトを組み合わせて共有サービスを作成できます。BehaviorSubject の使用については、このブログを参照してください

blog.tcs-y .com/2019/10/08/…

dataService.ts

import {BehaviorSubject} from &#39;rxjs&#39;;
import { Injectable} from &#39;@angular/core&#39;;
@Injectable(
  {providedIn: &#39;root&#39;}
)
export class DataService {
  data: BehaviorSubject<number> = new BehaviorSubject<number>(0);
}

ログイン後にコピー

を作成し、コンポーネント 1 のコンストラクターにサービスを挿入し、data

child1 を設定します。 Component.ts

constructor(private dataService: DataService) {}
    // 设置data的值
changeData(): void {
    this.dataService.data.next(10);
}

ログイン後にコピー

child1.component.html

<button (click)="changeData()">Click</button>

ログイン後にコピー

コンポーネント 2 のコンストラクターにサービスを挿入し、data

child2.component.ts

constructor(private dataService: DataService) {
    this.dataService.data.subscribe(value => {
        console.log(value); // 10
    });
}

ログイン後にコピー

をサブスクライブします。

プログラミング関連の知識について詳しくは、

プログラミング入門

をご覧ください。！

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

Angular コンポーネント間の 5 つの通信方法に関する簡単な説明

1. 親コンポーネントは、入力バインディングを通じて子コンポーネントにデータを渡します

子コンポーネント

子コンポーネント

#親コンポーネント

dataService.tsimport {BehaviorSubject} from &#39;rxjs&#39;; import { Injectable} from &#39;@angular/core&#39;; @Injectable( {providedIn: &#39;root&#39;} ) export class DataService { data: BehaviorSubject<number> = new BehaviorSubject<number>(0); }ログイン後にコピー

dataService.ts
import {BehaviorSubject} from 'rxjs'; import { Injectable} from '@angular/core'; @Injectable( {providedIn: 'root'} ) export class DataService { data: BehaviorSubject<number> = new BehaviorSubject<number>(0); }
ログイン後にコピー