Angular父子組件通過服務(wù)傳參的示例方法

更新時間：2018年10月31日 15:12:29 作者：前端攻城小牛

這篇文章主要介紹了Angular父子組件通過服務(wù)傳參的示例方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

今天在使用ngx-translate做多語言的時候遇到了一個問題，需要在登錄頁面點擊按鈕，然后調(diào)用父組件中的一個方法。
一開始想到了@input和@output，然而由于并不是單純的父子組件關(guān)系，而是包含路由的父子組件關(guān)系，所以并不能使用@input方法和@output方法。

然后去搜索一下，發(fā)現(xiàn)stackoverflow上有答案，用的是service來進行傳參，發(fā)現(xiàn)很好用，所以和大家分享一下。

首先，創(chuàng)建一個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方法傳遞參數(shù)：

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');
 }
}

父組件通過服務(wù)接收參數(shù)：

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);
 });
 }
}

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

AngularJs 指令詳解及示例代碼
本文主要介紹AngularJs 指令的知識，這里整理了詳細的資料和簡單示例代碼幫助大家學習理解應(yīng)用，有興趣的小伙伴可以參考下
2016-09-09
Angular2數(shù)據(jù)綁定詳解
本篇文章主要介紹了Angular2數(shù)據(jù)綁定的相關(guān)知識。具有很好的參考價值。下面跟著小編一起來看下吧
2017-04-04
詳解Angular結(jié)構(gòu)型指令模塊和樣式
本文主要介紹了Angular的結(jié)構(gòu)性指令模塊和樣式，對此感興趣的同學，可以參考下。
2021-05-05
Angular實現(xiàn)的進度條功能示例
這篇文章主要介紹了Angular實現(xiàn)的進度條功能,結(jié)合實例形式較為詳細的分析了angular進度條功能的相關(guān)界面布局、功能等操作技巧,需要的朋友可以參考下
2018-02-02
AngularJS入門教程之Scope(作用域)
本文主要介紹AngularJS Scope(作用域),這里對Score知識做了詳細介紹,并提供實例代碼,有需要的小伙伴可以參考下
2016-07-07
AngularJS基礎(chǔ) ng-csp 指令詳解
本文主要介紹AngularJS ng-csp 指令,這里對ng-csp 的基礎(chǔ)資料的整理,并附代碼實例和實現(xiàn)效果圖,有需要的小伙伴參考下
2016-08-08
Angular.js通過自定義指令directive實現(xiàn)滑塊滑動效果
這篇文章主要給大家介紹了關(guān)于Angular.js如何通過自定義指令directive實現(xiàn)滑塊滑動的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用angularjs具有一定的參考學習價值，需要的朋友們下面來一起看看吧。
2017-10-10
Angular中innerHTML標簽的樣式不起作用的原因解析
這篇文章主要介紹了Angular中innerHTML標簽的樣式不起作用詳解 ,本文給出了解決方案，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
2019-06-06
Angular4自制一個市縣二級聯(lián)動組件示例
本篇文章主要介紹了Angular4自制一個市縣二級聯(lián)動組件示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-11-11
詳解在Angularjs中ui-sref和$state.go如何傳遞參數(shù)
這篇文章主要介紹了詳解在Angularjs中ui-sref和$state.go如何傳遞參數(shù)，詳細的介紹了ui-sref和$state.go的區(qū)別和如何傳參，有興趣的可以了解下
2017-04-04