這次帶給大家angular組件間傳值與通信使用詳解,angular組件間傳值與通信的注意事項有哪些,下面就是實戰案例,一起來看一下。
本文主要介紹angular在不同的元件中如何進行傳值,如何通訊。主要分為父子組件和非父子組件部分。
父子元件間參數與通訊方法
使用事件通訊(EventEmitter,@Output):
# 場景:可以在父子元件之間進行通信,一般使用在子元件傳遞訊息給父元件;
步驟:
# 子元件建立事件EventEmitter對象,使用 @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或router.navigate或router.navigateByUrl進行頁面跳到B元件
# 此方法只適用於參數傳遞,組件間的參數一旦接收就不會改變
# 程式碼
傳遞方式
routerLink
<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和組件B同時注入該服務;
// 组件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(‘我发消息了,你们接受下'); // 发送信息消息 }這裡的MessageService,就等於使用廣播機制,在所有的元件之間傳遞訊息;不管是數字,
字串,還是物件都是可以傳遞的,而且這裡的傳播速度也是很快的。
我相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章! 推薦閱讀:以上是angular組件間傳值與通訊使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!