ASP源码.NET源码PHP源码JSP源码JAVA源码DELPHI源码PB源码VC源码VB源码Android源码
当前位置:首页 >> 网页制作 >> Javascript教程 >> angular2 组件之间通过service互相传递的实例

angular2 组件之间通过service互相传递的实例(1/2)

来源:网络整理     时间:2018-10-04     关键词:

本篇文章主要介绍了" angular2 组件之间通过service互相传递的实例",主要涉及到方面的内容,对于Javascript教程感兴趣的同学可以参考一下: 母组件传值给子组件母组件通过service传值给子组件,很简单,声明一个service@Injectable()export class ToolbarTitl...

母组件传值给子组件

母组件通过service传值给子组件,很简单,声明一个service

@Injectable()
export class ToolbarTitleService {
 title:string;
}

然后在母组件中依赖注入

@Component({
 selector: 'admin',
 templateUrl: './admin.component.html',
 styleUrls: ['./admin.component.scss'],
 providers: [ToolbarTitleService],
})

子组件中直接声明即可使用

export class RoleListComponent implements OnInit {
 constructor(private toolbarTitleService:ToolbarTitleService) {
   console.log(this.toolbarTitleService.title);
   }
 ngOnInit() { }
}

子组件传值给母组件

那么我想反过来传值回去该怎么办,即使我在子组件注入了service,母组件也不会在我修改了servie的值之后得到通知,这时候就需要用到subscribe

service代码:

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';

@Injectable()
export class ToolbarTitleService {
 private titleSource = new Subject();
 //获得一个Observable
 titleObservable =this.titleSource.asObservable();
 constructor() { }
 //发射数据,当调用这个方法的时候,Subject就会发射这个数据,所有订阅了这个Subject的Subscription都会接受到结果
 emitTitle(title: string) {
  this.titleSource.next(title);
 }
}

子组件代码:

import { ToolbarTitleService } from './../../common/toolbar-title.service';
import { Component, OnInit ,Output,EventEmitter} from '@angular/core';

@Component({
 selector: 'role-list',
 templateUrl: 'role-list.component.html',
 styleUrls: ['./role-list.component.css'],
 providers: [],
})

export class RoleListComponent implements OnInit {
 constructor(private toolbarTitleService:ToolbarTitleService) {
   //调用方法,发射数据
   this.toolbarTitleService.emitTitle('角色列表');
   }
 ngOnInit() { }
}

母组件:

相关图片

相关文章