Angular开发(十三)-服务的基本认识及利用服务实现组件间的通信

服务本人简单的理解为传统的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()"/>