今天在使用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