Angular开发(十三)-服务的基本认识及利用服务实现组件间的通信
2017-05-10 13:04
796 查看
服务本人简单的理解为传统的
2、当组件中掺杂了太多的业务代码和数据处理逻辑时,把这些逻辑封装成服务供组件使用,组件仅仅负责跟UI相关的逻辑(例如:
3、把共享的数据提取到服务中(例如:一个页面中多次使用的效果)、
4、组件之间的通信
ng g service 服务文件夹/服务名称
二、现在创建一个
改服务中创建一个
javascript中的方法或者封装好的插件,在
angular中称为服务,哪个组件需要使用该服务就注入进去(类似传统的方法调用或者插件的使用)
常见服务的使用场景
1、多个组件中出现重复的代码时,把重复的代码提取到服务中实现代码的复用(例如:与服务器通信的数据服务)2、当组件中掺杂了太多的业务代码和数据处理逻辑时,把这些逻辑封装成服务供组件使用,组件仅仅负责跟UI相关的逻辑(例如:
form表单的校验,把表单的校验写成服务,注入进来)
3、把共享的数据提取到服务中(例如:一个页面中多次使用的效果)、
4、组件之间的通信
一、创建一个服务
ng new demo 创建一个项目ng g service 服务文件夹/服务名称
二、现在创建一个ChidTofatherService
表示子组件传递数据到父组件
改服务中创建一个list存储数据,定义一个方法往这个
list里面追加数据
import { Injectable } from '@angular/core'; @Injectable() export class ChidTofatherService { list:string[] = []; constructor() { } append(str:any){ this.list.push(str); } }
//父组件的ts文件 import { Component, OnInit } from '@angular/core'; //引入创建的服务 import {ChidTofatherService} from "./../service/chid-tofather.service"; @Component({ selector: 'app-father', templateUrl: './father.component.html', styleUrls: ['./father.component.css'], providers:[ChidTofatherService] //模块中依赖的服务,引入后该模块下所有的组件都可以使用(注入服务) }) export class FatherComponent implements OnInit { //本组件中的list list:string[] = []; //申明引用 constructor(private service:ChidTofatherService) { } ngOnInit() { this.list = this.service.list; //把服务里面的list数据赋值给组件的list中 } }
//父组件的html代码,如果list有数据就循环出来展现 <app-child></app-child> <ul> <li *ngFor="let item of list">{{item}}</li> </ul>
//子组件的ts文件 import { Component, OnInit } from '@angular/core'; import {ChidTofatherService} from "./../service/chid-tofather.service"; @Component({ selector: 'app-child', templateUrl: './child.component.html', styleUrls: ['./child.component.css'] }) export class ChildComponent implements OnInit { inputText:string = ""; constructor(private service:ChidTofatherService) { } ngOnInit() { } add(){ this.service.append(this.inputText); this.inputText = ""; } }
//子组件的html代码 <input type="text" [(ngModel)]="inputText"/> <input type="button" value="新增" (click)="add()"/>
相关文章推荐
- Angular 2父子组件之间共享服务通信的实现
- Angular开发(五)-关于组件的基本认识
- Android开发之使用AIDL和远程服务实现进程通信
- Android应用开发之利用服务实现电话监听
- Delphi 利用TComm组件 Spcomm 实现串行通信
- Angular开发(十)-关于表单的基本认识
- Windows 8 Directx 开发学习笔记(十三)利用模板实现木箱镜像
- Android开发中Socket通信的基本实现方法讲解
- iOS开发UI-利用Quartz2D 实现基本绘图(画三角形、矩形、圆、圆弧)
- J2EE Web服务开发系列之十三: 实现安全的AXIS Web服务,第2部分
- Angular开发(九)-关于响应式基本认识
- iPhone开发之UIScrollView滚动组件的使用(二) 拖线实现按钮控制大图移动利用contentOffset属性
- SharpStreaming项目开发纪实:构建基本的服务器及客户端应用(六)——服务器通信部分初步实现
- 小韵游戏开发学习笔记——第四期:认识Unity基本组件(一)
- 干货!手把手教你如何使用第三方通讯服务实现LayIM Socket组件开发。
- 三十、【C#.Net开发框架】WCFHosting服务主机的利用WCF服务通讯和实现思路
- 利用flash与.net下socket通信实现WEB页面的“推”(一)基本概述
- Angular开发(八)-关于表单的基本认识
- Angular2利用组件与指令实现图片轮播组件
- 这篇文章给大家介绍Android开发四大组件之实现电话拦截和电话录音,涉及到android四大基本组件在程序中的应用,对android四大基本组件感兴趣的朋友可以参考下本篇文章