1. 程式人生 > >深入解析Angular父子元件通過服務傳參

深入解析Angular父子元件通過服務傳參

今天在使用ngx-translate做多語言的時候遇到了一個問題,需要在登入頁面點選按鈕,然後呼叫父元件中的一個方法。
一開始想到了@input和@output,然而由於並不是單純的父子元件關係,而是包含路由的父子元件關係,所以並不能使用@input方法和@output方法。
然後去搜索一下,發現stackoverflow上有答案,用的是service來進行傳參,發現很好用,所以和大家分享一下。

首先,建立一個service.

shared-service.ts
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';
@Injectable()
export class SharedService {
 // Observable string sources
 private emitChangeSource = new Subject<any>();
 // Observable string streams
 changeEmitted$ = this.emitChangeSource.asObservable();
 // Service message commands
 emitChange(change: any) {
 this.emitChangeSource.next(change);
 }
}

然後把這個service分別注入父元件和子元件所屬的module中,記得要放在providers裡面。

然後把service再引入到父子元件各自的component裡面。

子元件通過onClick方法傳遞引數:

child.component.ts
import { Component} from '@angular/core';
@Component({
 templateUrl: 'child.html',
 styleUrls: ['child.scss']
})
export class ChildComponent {
 constructor(
 private _sharedService: SharedService
 ) { }
onClick(){
 this._sharedService.emitChange('Data from child');
 }
}

父元件通過服務接收引數:

parent.component.ts
import { Component} from '@angular/core';
@Component({
 templateUrl: 'parent.html',
 styleUrls: ['parent.scss']
})
export class ParentComponent {
 constructor(
 private _sharedService: SharedService
 ) {
 _sharedService.changeEmitted$.subscribe(
 text => {
 console.log(text);
 });
 }
}

為了學習工作與休閒娛樂互不衝突,現新建圈【碼農茶水鋪】用於程式設計師生活,愛好,交友,求職招聘,吐槽等話題交流,希望各位大神工作之餘到茶水鋪來喝茶聊天。群號:582735936