本文主要介紹了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);// 父组件获得子组件属性 } }
非父子元件參數傳遞與通訊方法
透過路由參數
場景:一個元件可以透過路由的方式跳到另一個元件如:清單與編輯步驟:
#
<a routerLink=["/exampledetail",id]></a> routerLink=["/exampledetail",{queryParams:object}] routerLink=["/exampledetail",{queryParams:'id':'1','name':'yxman'}];router.navigate
this.router.navigate(['/exampledetail',id]); this.router.navigate(['/exampledetail'],{queryParams:{'name':'yxman'}});router.navigateByUrl
this.router.navigateByUrl('/exampledetail/id'); this.router.navigateByUrl('/exampledetail',{queryParams:{'name':'yxman'}});傳參方傳參之後,接收方2種接收方式如下: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']; }; }queryParams
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']; }); };
使用服務Service進行通信,即:兩個元件同時注入某個服務
場景:需要通信的兩個元件不是父子元件或不是相鄰元件;當然,也可以是任意組件。 步驟:// 组件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发送消息 } }
#訊息服務模組##場景:這裡牽涉到一個項目,裡面需要實現的是所有組件之間都有可能通信,或者是一個組件需要給幾個組件通信,且不可通過路由進行傳參。
設計方式:
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(‘我发消息了,你们接受下'); // 发送信息消息 }
相關推薦: