亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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 HTML編譯器介紹

    AngularJS HTML編譯器介紹

    這篇文章主要介紹了AngularJS HTML編譯器介紹,AngularJS的HTML編譯器能讓瀏覽器識別新的HTML語法。它能讓你將行為關(guān)聯(lián)到HTML元素或者屬性上，甚至能讓你創(chuàng)造具有自定義行為的新元素,需要的朋友可以參考下
    2014-12-12
  • Angular.js ng-file-upload結(jié)合springMVC的使用教程

    Angular.js ng-file-upload結(jié)合springMVC的使用教程

    這篇文章主要給大家介紹了關(guān)于Angular.js文件上傳控件ng-file-upload結(jié)合springMVC的使用教程，文中通過示例代碼介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面來一起看看吧。
    2017-07-07
  • Angular 2父子組件數(shù)據(jù)傳遞之@ViewChild獲取子組件詳解

    Angular 2父子組件數(shù)據(jù)傳遞之@ViewChild獲取子組件詳解

    這篇文章主要給大家介紹了關(guān)于Angular 2父子組件數(shù)據(jù)傳遞之@ViewChild獲取子組件的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家具有一定參考學習價值，需要的朋友們下面來一起看看吧。
    2017-07-07
  • Angular在模板驅(qū)動表單中自定義校驗器的方法

    Angular在模板驅(qū)動表單中自定義校驗器的方法

    本章介紹的是如何對模板驅(qū)動表單創(chuàng)建自定義校驗器，它相比較響應(yīng)式表單自定義校驗器略為復(fù)雜一些。接下來通過本文給大家分享Angular在模板驅(qū)動表單中自定義校驗器的方法，感興趣的朋友一起看看吧
    2017-08-08
  • Angularjs 事件指令詳細整理

    Angularjs 事件指令詳細整理

    這篇文章主要介紹了Angularjs 事件指令詳細整理的相關(guān)資料,這里對AngularJS 的所有的事件指令一一做出詳細介紹，需要的朋友可以參考下
    2017-07-07
  • AngularJs表單驗證實例詳解

    AngularJs表單驗證實例詳解

    這篇文章主要介紹了用AngularJs驗證表單實例詳解的相關(guān)資料,需要的朋友可以參考下
    2016-05-05
  • AngularJS ng-repeat數(shù)組有重復(fù)值的解決方法

    AngularJS ng-repeat數(shù)組有重復(fù)值的解決方法

    不知道大家是否遇到過這個問題，在當Angular.JS ng-repeat數(shù)組中有重復(fù)項時，系統(tǒng)就會拋出異常，這是該怎么做？本文通過示例代碼介紹了詳細的解決方法，有需要的朋友們可以參考借鑒，下面來一起看看吧。
    2016-10-10
  • angularJS Provider、factory、service詳解及實例代碼

    angularJS Provider、factory、service詳解及實例代碼

    這篇文章主要介紹了angularJS Provider詳解及實例代碼的相關(guān)資料,需要的朋友可以參考下
    2016-09-09
  • AngularJS入門教程之控制器詳解

    AngularJS入門教程之控制器詳解

    本文主要介紹 AngularJS控制器,這里對 AngularJS控制器的知識詳細講解,并提供實例代碼有需要的小伙伴可以參考下
    2016-07-07
  • AngularJS 避繁就簡的路由

    AngularJS 避繁就簡的路由

    這篇文章主要為大家詳細介紹了AngularJS 避繁就簡的路由的相關(guān)資料，感興趣的小伙伴們可以參考一下
    2016-07-07

最新評論