首页 > 代码库 > angular2 组件之间通讯-使用服务通讯模式 2016.10.27 基于正式版ng2
angular2 组件之间通讯-使用服务通讯模式 2016.10.27 基于正式版ng2
工作中用到ng2的组件通讯 奈何官方文档言简意赅 没说明白 自己搞明白后 整理后分享下
rxjs 不懂的看这篇文章 讲很详细 http://www.open-open.com/lib/view/open1462525661610.html
以下是服务代码
1 import { Injectable } from ‘@angular/core‘; 2 import {Subject}from"rxjs/Subject"; 3 @Injectable() 4 export class CService { 5 private outputTitle = new Subject(); 6 //订阅 7 //声明变量 订阅Observer 8 output$ = this.outputTitle.asObservable(); 9 10 //推送 调用next方法 Subject会向所有已经在其上注册的Observer多路推送 theValue 11 12 UpData(message:any) { 13 this.outputTitle.next(message); 14 } 15 }
以下是子组件中的代码 节选
1 import { Component, OnInit ,Input, 2 import {CService}from"../shared/corresponded.service";//引入服务 单例模式 3 4 @Component({ 5 //这里一定不要注册服务提供商 也就是不要在里面声明 6 providers: []//不需要提供CService服务 7 }) 8 export class HomePostsComponent implements OnInit { 9 10 constructor( 11 //与父组件的cs服务实例相同 是同一个实例 12 public _CService:CService) { 13 } 14 15 //自己业务需要在初始化的时候调用 所以就放在这里了 \ 16 ngOnInit() { 17 //发送消息 18 //updata调用next方法 推送数据 19 this._CService.UpData({title:"铃铛宠物",ico:""}); 20 } 21 22 }
以下是父组件代码 节选
1 import { Component,OnInit,AfterViewChecked,AfterViewInit} from ‘@angular/core‘; 2 //引入服务 3 import {CService}from"./shared/corresponded.service"; 4 @Component({ 5 //服务供应商 只在父组件使用 子组件不需要 6 providers: [CService] 7 }) 8 export class AppComponent implements OnInit,AfterViewChecked,AfterViewInit { 9 //此处cs 实例和子组件的实例是一样的 都是同一个实例 10 constructor(private CS:CService) { 11 12 } 13 14 //在ngAfterViewChecked每次做完组件视图和子视图的变更检测之后调用。 会执行多次 15 //ngAfterViewInit初始化完组件视图及其子视图之后调用。只调用一次 16 //订阅组件信息 只写了接收 没写发送 道理是一样的 17 ngAfterViewInit() { 18 let that = this; 19 console.log("ngAfterViewInit"); 20 this.CS.output$.subscribe((value:any)=> { 21 console.log(value); 22 that.title = value.title; 23 that.ico = value.ico; 24 }) 25 } 26 27 28 }
整个通信流程 核心就是单例 只有一个服务的实例 目前就这么多了 不明白的留言交流吧
angular2 组件之间通讯-使用服务通讯模式 2016.10.27 基于正式版ng2
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。