Angular父子元件通過服務傳參

前端攻城小牛啊發表於2018-10-29
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);
 }
}//
歡迎加入全棧開發交流群一起學習交流：864305860
複製程式碼

然後把這個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);
 });
 }
}
複製程式碼

本次給大家推薦一個免費的學習群，裡面概括移動應用網站開發，css，html，webpack，vue node angular以及面試資源等。 對web開發技術感興趣的同學，歡迎加入Q群：864305860，不管你是小白還是大牛我都歡迎，還有大牛整理的一套高效率學習路線和教程與您免費分享，同時每天更新視訊資料。 最後，祝大家早日學有所成，拿到滿意offer，快速升職加薪，走上人生巔峰。

相關文章