在本教程中，我们将了解如何在Angular组件（即多个组件）的数据服务中维护数据。我们知道对于开发人员来说，这是代码可重用的时代，我们制作了可重用的组件，并尝试优化数据和代码。我们将以相同的方式维护数据（即：静态数据或可能来自API响应的数据）。让我们开始了解带有服务和组件的模块结构。

模块结构

首先创建模块组件和服务文件。

// Module
_
|-- Post    
|	|-- components 
|		|-- update-post
|		|--  后标签 
|		|--  后表格 
|
|--services
	|--data.service.ts 
	|--post.service.ts 

Instead of using @input() we will use the 数据服务 它将维护整个模块组件中的数据。

角度组件的数据服务

First will create the multiple components for which we will use the data service as common data for all the components (i.e: without @input()).
在此示例中，将包含三个部分，

<!-- Wrapper component containing 2 post data component -->
<!-- With Out @input() -->
<app-post-from></app-post-from>
<app-post-tags></app-post-tags>

import { Component, OnInit } from '@angular/core';
import {DataService} from '../../services/data.service';
@Component({
	selector: 'app-update-post',
	templateUrl: './update-post.component.html',
	styleUrls: [ './update-post.component.css' ]
})
export class UpdatePostComponent  { 
  	constructor(public dataService: DataService) {}
  	/* 

	  @API FUNCTION CALL On INIT
	  ngOnInit(){
	  	this.callApi();
	  }

  	@API Function
  	callApi(){
  		this.callSomeService().subscribe( 
  			res => {
  				this.dataService.postData = res.data;
  			}
  		);
	}

  */
}

共享数据服务

创建数据服务后，我们可以通过将响应API数据映射到数据服务类中已声明的变量来映射数据服务。

export class DataService {
	postData:any  = {
	post_title: 'Title Of the post',
	post_content: `<p>^Is Html Content to be display on post page </p>`,
	tags: [
		  {id:1, name: 'CSS'},
		  {id:2, name: 'HTML'},
		  {id:3, name: 'JavaScript'},
		  {id:4, name: 'TypeScript'},
		  {id:5, name: 'Angular'},
		]
	}
}

如果您的数据顺序不同，我们可以创建一个函数来映射那些响应数据
例如 ：

export class DataService {	
	postData:any  = {}

	// Pass API response data to function
	mapData(data){
		return {
		post_title: data.title,
		post_content: data.content,
		tags: data.tags
		} 
	}

	/*  
		And in component map function to class variable for E.g: 
		@ In update-post.component.ts In response
		this.dataService.postData = this.dataService.mapData(res.data);
	*/ 
}

在其他组件中使用数据

在其他两个组件中，我们将注入Dataservice类并使用其Data，即

• 帖子内容
• 发表标签

import { Component, OnInit } from '@angular/core';
import {DataService} from '../../services/data.service';

@Component({
  selector: 'app-post-from',
  templateUrl: './post-from.component.html',
  styleUrls: ['./post-form.component.css']
})
export class PostFromComponent implements OnInit {

// inject Data Service	as public so we can directly use in HTML
  constructor(public dataService: DataService) { }

  ngOnInit() {
  }

}

注入服务后，我们可以使用HTML内容来显示数据。

<textarea>
  {{dataService.postData.post_content}}
</textarea>

我们可以在其他组件中注入数据服务的方式相同，即 后标签 .component.ts 并使用如下所述的数据：

<h5>TAGS: </h5>
<ul>
  <li *ngFor="let tags of dataService.postData.tags"> {{tags.id}} : {{tags.name}}</li>
</ul>