父组件和它的子组件共享同一个服务,可以将这服务理解为全局,同时共用,但是这个服务实例的作用域被限制在父组件和其子组件内,这个组件之外的服务无法访问这个服务。

import { Injectable } from '@angular/core';
@Injectable()
export class myService {
  list:string[] = [];
  constructor() { }
  append(str:any){
    this.list.push(str);
  }
}
//faher.compnent.ts
import { Component, OnInit } from '@angular/core'; 
import {Service} from "service/
Service.service";
@Component({
selector: 'app-father',
templateUrl: 'father.component.html',
styleUrls: ['father.component.css'],
providers:[Service]
(注入服务)
})
 export class FatherComponent implements OnInit {
list:string[] = [];
constructor(
    private service:Service
) { }
ngOnInit() {
  this.list = this.service.list;
} }
//faher.compnent.html

<app-child></app-child> <ul> <li *ngFor="let item of list">{{item}}</li> </ul>

 

//child.compnent.ts
import { Component, OnInit } from '@angular/core';
import {Service} from "service/child.service";
@Component({
selector: 'app-child',
templateUrl: 'child.component.html',
styleUrls: ['child.component.css'] })
export class ChildComponent implements OnInit {
inputText:string = "";
constructor(
private service:Service
) { }
ngOnInit() { }
   add(){
  this.service.appeend( this.inputText);
   this.inputText = "";
} }
//child.compnent.html
<input type="text" [(ngModel)]="inputText"/> 
<input type="button" value="add" (click)="add()"/>