Angularコンポーネント間の値の転送と通信の詳細な説明

今回は、Angular コンポーネント間の値の転送と通信の使用方法について詳しく説明します。Angular コンポーネント間の値の転送と通信に関する 注意事項 は何ですか。実際のケースを見てみましょう。

この記事では、Angular がさまざまなコンポーネントでどのように値を転送し、通信するかを主に紹介します。主に親子コンポーネントと非親子コンポーネントに分かれます。

親コンポーネントと子コンポーネント間のパラメータと通信方法​​

イベント通信を使用する (EventEmitter、@Output):

シナリオ: 通信は親コンポーネントと子コンポーネントの間で実行でき、通常は子コンポーネントで親コンポーネントにメッセージを渡すために使用されます。 手順:

子コンポーネントはイベント EventEmitter オブジェクトを作成し、 @output を使用して公開します。親コンポーネントは子コンポーネント @output からのメソッドをリッスンして、イベントを処理します。

コード:

2.  // child 组件
     @Component({
      selector: 'app-child',
      template: '',
      styles: [``]
     })
     export class AppChildComponent implements OnInit {
      @Output() onVoted: EventEmitter<any> = new EventEmitter();
      ngOnInit(): void {
       this.onVoted.emit(1);
      }
     }
     // parent 组件
     @Component({
      selector: 'app-parent',
      template: `
       <app-child (onVoted)="onListen($event)"></app-child>
      `,
      styles: [``]
     })
     export class AppParentComponent implements OnInit {
      ngOnInit(): void {
       throw new Error('Method not implemented.');
      }
      onListen(data: any): void {
       console.log('TAG' + '---------->>>' + data);
      }
     }

   @ViewChild と @ViewChildren を使用します:

シナリオ: 通常、親コンポーネントが子コンポーネントに情報を渡すために、または親コンポーネントが子コンポーネントのメソッドを呼び出すために使用されます。 手順:

親コンポーネントで子コンポーネントを使用します

親コンポーネントで @ViewChild を使用して、子コンポーネントのオブジェクトを取得します。

1. 親コンポーネントは、子コンポーネント オブジェクトを使用して子コンポーネントを制御します (情報を渡すか、メソッドを呼び出します)。

2. コード:

   rrree
3. 親子コンポーネント以外のパラメータの受け渡しと通信メソッド

ルーティングパラメータによる

シナリオ: あるコンポーネントは、リストや編集などのルーティングを通じて別のコンポーネントにジャンプできます

手順:

コンポーネント A は、routerLink、router.navigate、または router.navigateByUrl を使用してコンポーネント B にジャンプします。コンポーネント B は、これらのパラメータを受け入れます。 このメソッドは、コンポーネント間のパラメータの転送にのみ適しています。パラメータは一度受信されると変更されません

。 コード

配送方法

ルーターリンク

りぃ
1. router.navigate

   // 子组件
   @Component({
    selector: 'app-child',
    template: '',
    styles: [``]
   })
   export class AppChildComponent2 implements OnInit {
     data = 1;
     ngOnInit(): void {
    }
    getData(): void {
     console.log('TAG' + '---------->>>' + 111);
    }
   }
   // 父组件
   @Component({
    selector: 'app-parent2',
    template: `
     <app-child></app-child>
    `,
    styles: [``]
   })
   export class AppParentComponent2 implements OnInit {
    @ViewChild(AppChildComponent2) child: AppChildComponent2;
    ngOnInit(): void {
     this.child.getData(); // 父组件获得子组件方法
     console.log('TAG'+'---------->>>'+this.child.data);// 父组件获得子组件属性
    }
   }

   router.navigateByUrl

<a routerLink=["/exampledetail",id]></a>
routerLink=["/exampledetail",{queryParams:object}]
routerLink=["/exampledetail",{queryParams:'id':'1','name':'yxman'}];

2. パラメータ転送側がパラメータを渡した後、受信側には次の 2 つの受信方法があります:
   スナップショット
りぃ

queryParams

this.router.navigate(['/exampledetail',id]);
this.router.navigate(['/exampledetail'],{queryParams:{'name':'yxman'}});

サービスを使用して通信します。つまり、2 つのコンポーネントが同時にサービスを注入します

シナリオ: 通信する必要がある 2 つのコンポーネントは、親子コンポーネントや隣接するコンポーネントではありません。もちろん、任意のコンポーネントにすることもできます。

手順:

新しいサービスを作成すると、コンポーネント A とコンポーネント B が同時にサービスに挿入されます

コンポーネント A はサービスからデータを取得するか、サービスにデータを送信しようとします

コンポーネント B はサービスからデータを取得しますサービスにアクセスするか、サービスにデータを送信したいと考えています。

コード:

rrree

メッセージサービスモジュール

1. シナリオ: これには、すべてのコンポーネントが通信できる必要があるプロジェクト、または 1 つのコンポーネントが複数のコンポーネントと通信できる必要があり、パラメーターをルーティング経由で渡すことができないプロジェクトが含まれます。
2. デザイン方法:

3. RxJs を使用してサービス モジュール MessageService を定義すると、すべての情報がこのサービスに登録されます

メッセージを送信する必要がある場合はサービスのメソッドを呼び出します

情報を受信する必要がある場合はそれを呼び出します。情報を受信するメソッド、Subscription オブジェクトを取得し、情報をリッスンします

もちろん、各コンポーネントが破棄されるときは

this.router.navigateByUrl('/exampledetail/id');
this.router.navigateByUrl('/exampledetail',{queryParams:{'name':'yxman'}});

1. が必要です。 コード:

   import { ActivateRoute } from '@angular/router';
   public data: any;
   export class ExampledetailComponent implements OnInit { 
     constructor( public route: ActivateRoute ) { };
     ngOnInit(){
       this.data = this.route.snapshot.params['id'];
     };
   }

   ここでの MessageService は、ブロードキャスト メカニズムを使用してすべてのコンポーネント間で情報を転送するのと同等です。数値、文字列、オブジェクトを問わず、転送することができ、伝播速度も非常に高速です。
2. この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。
   推奨読書:

jsカプセル化操作クラスの手順を詳しく解説


無効なタグselected="selected"属性への対処方法

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