この記事は、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 を使用します:
シナリオ: 通常、親コンポーネントが子コンポーネントに情報を渡すか、親コンポーネントが子コンポーネントのメソッドを呼び出すために使用されます。
// 子组件 @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);// 父组件获得子组件属性 } }
ルーティングパラメータ経由
シナリオ: あるコンポーネントは、ルーティングを通じて別のコンポーネントにジャンプできます。例: list
の編集手順:
Code
Transferメソッド
routerLink
<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'}});
this.router.navigateByUrl('/exampledetail/id'); this.router.navigateByUrl('/exampledetail',{queryParams:{'name':'yxman'}});
snapshot
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']; }; }
import { ActivateRoute } from '@angular/router'; export class ExampledetailComponent implements OnInit { public data: any; constructor( public activeRoute:ActivateRoute ) { }; ngOnInit(){ this.activeRoute.queryParams.subscribe(params => { this.data = params['name']; }); };
シナリオ: 必要な 2 人通信する コンポーネントは、親子コンポーネントや隣接コンポーネントではありません。もちろん、任意のコンポーネントにすることもできます。
手順:
// 组件A @Component({ selector: 'app-a', template: '', styles: [``] }) export class AppComponentA implements OnInit { constructor(private message: MessageService) { } ngOnInit(): void { // 组件A发送消息3 this.message.sendMessage(3); const b = this.message.getMessage(); // 组件A接收消息; } } // 组件B @Component({ selector: 'app-b', template: ` <app-a></app-a> `, styles: [``] }) export class AppComponentB implements OnInit { constructor(private message: MessageService) { } ngOnInit(): void { // 组件B获得消息 const a = this.message.getMessage(); this.message.sendMessage(5); // 组件B发送消息 } }
シナリオ: これには、すべてのコンポーネントが通信できる必要があるプロジェクト、または 1 つのコンポーネントが複数のコンポーネントに通信を提供する必要があり、パラメーターを渡すことができないプロジェクトが含まれます。ルーティングを通じて。
設計メソッド:
this.subscription.unsubscribe();
// 消息中专服务 @Injectable() export class MessageService { private subject = new Subject<any>(); /** * content模块里面进行信息传输,类似广播 * @param type 发送的信息类型 * 1-你的信息 * 2-你的信息 * 3-你的信息 * 4-你的信息 * 5-你的信息 */ sendMessage(type: number) { console.log('TAG' + '---------->>>' + type); this.subject.next({type: type}); } /** * 清理消息 */ clearMessage() { this.subject.next(); } /** * 获得消息 * @returns {Observable<any>} 返回消息监听 */ getMessage(): Observable<any> { return this.subject.asObservable(); } } // 使用该服务的地方,需要注册MessageService服务; constructor(private message: MessageService) { } // 消息接受的地方; public subscription: Subscription; ngAfterViewInit(): void { this.subscription = this.message.getMessage().subscribe(msg => { // 根据msg,来处理你的业务逻辑。 }) } // 组件生命周期结束的时候,记得注销一下,不然会卡; ngOnDestroy(): void { this.subscription.unsubscribe(); } // 调用该服务的方法,发送信息; send():void { this.message.sendMessage(‘我发消息了,你们接受下'); // 发送信息消息 }
関連する推奨事項:
nodejs の Express で get 値と post 値を取得する方法とセッション検証を例を挙げて説明します