ホームページ >ウェブフロントエンド >jsチュートリアル >Angularコンポーネント間の値の転送と通信の詳細な説明
今回は、Angular コンポーネント間の値の転送と通信の使用方法について詳しく説明します。Angular コンポーネント間の値の転送と通信に関する 注意事項 は何ですか。実際のケースを見てみましょう。
この記事では、Angular がさまざまなコンポーネントでどのように値を転送し、通信するかを主に紹介します。主に親子コンポーネントと非親子コンポーネントに分かれます。親コンポーネントと子コンポーネント間のパラメータと通信方法
イベント通信を使用する (EventEmitter、@Output):
シナリオ: 通信は親コンポーネントと子コンポーネントの間で実行でき、通常は子コンポーネントで親コンポーネントにメッセージを渡すために使用されます。 手順: 子コンポーネントはイベント EventEmitter オブジェクトを作成し、 @output を使用して公開します。親コンポーネントは子コンポーネント @output からのメソッドをリッスンして、イベントを処理します。// 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 を使用して、子コンポーネントのオブジェクトを取得します。コード:
rrreeシナリオ: あるコンポーネントは、リストや編集などのルーティングを通じて別のコンポーネントにジャンプできます
手順:コンポーネント A は、routerLink、router.navigate、または router.navigateByUrl を使用してコンポーネント B にジャンプします。コンポーネント B は、これらのパラメータを受け入れます。 このメソッドは、コンポーネント間のパラメータの転送にのみ適しています。パラメータは一度受信されると変更されません
。 コード 配送方法 ルーターリンク// 子组件 @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'}];
this.router.navigate(['/exampledetail',id]); this.router.navigate(['/exampledetail'],{queryParams:{'name':'yxman'}});
サービスを使用して通信します。つまり、2 つのコンポーネントが同時にサービスを注入します
シナリオ: 通信する必要がある 2 つのコンポーネントは、親子コンポーネントや隣接するコンポーネントではありません。もちろん、任意のコンポーネントにすることもできます。 手順: 新しいサービスを作成すると、コンポーネント A とコンポーネント B が同時にサービスに挿入されますコンポーネント A はサービスからデータを取得するか、サービスにデータを送信しようとします
コンポーネント B はサービスからデータを取得しますサービスにアクセスするか、サービスにデータを送信したいと考えています。
コード:rrree
情報を受信する必要がある場合はそれを呼び出します。情報を受信するメソッド、Subscription オブジェクトを取得し、情報をリッスンします
もちろん、各コンポーネントが破棄されるときは
this.router.navigateByUrl('/exampledetail/id'); this.router.navigateByUrl('/exampledetail',{queryParams:{'name':'yxman'}});
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 は、ブロードキャスト メカニズムを使用してすべてのコンポーネント間で情報を転送するのと同等です。数値、文字列、オブジェクトを問わず、転送することができ、伝播速度も非常に高速です。
以上がAngularコンポーネント間の値の転送と通信の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。