使用Observable的Angular 7 Angular数据服务

Observables

Observable管理异步数据和其他一些有用的模式。可观察变量与Promises相似，但有一些关键的不同。与Promises不同的是，Observables会在一段时间内发射多个值。在实际场景中，网络套接字或基于实时的数据或事件处理程序可以在任何给定时间内发出多个值。在这种情况下，Observables是最好的选择。

在angular中，Observables是最常用的技术之一，在与数据服务的整合中被广泛使用，以读取REST API。除此以外，要访问一个可观察对象，组件首先需要订阅可观察对象。这样做对访问可观察到的数据很重要 REpresentational State Transfer（REST）是一种架构风格，它定义了一套用于创建Web服务的约束条件。REST API是一种简单、灵活地访问网络服务的方式，无需任何处理。要阅读更多内容，你可以浏览这个链接。

Services

服务被用来创建可以共享的变量/数据，并且可以在定义它的组件之外使用。一个服务可以被任何组件使用，因此它作为一个共同的数据点，数据可以被分配到应用程序中的任何组件。要了解更多关于服务的信息，请点击这个链接。

要添加一个服务，在控制台写下以下命令。

ng g s ServiceName
OR
ng generate service ServiceName

示例:
这是一个名为 “数据 “的服务的小例子，组件中发生的事件将触发该服务的方法。

data.service.ts的代码。

import { Injectable } from '@angular/core';
 
@Injectable({
  providedIn: 'root'
})
export class DataServiceService {
 
  constructor() { }
clickEvent(){
  console.log('Click Event');
}
}

app.component.ts的代码。

import { Component } from '@angular/core';
import {DataServiceService} from './data-service.service'
@Component({
  selector: 'app-root',
  template: '<html>
                       <body>
<button (click)="clickEvent()" style="width:50px;height:30px">Button</button>
                       </body>
               </html>',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private Data: DataService) {
  }
function cEvent(){
  this.Data.clickEvent()
}
}

输出:

使用Observable的Angular 7 Angular数据服务

具有可观察性的服务：
结合起来，它是著名的REST API工作。在下面的例子中，将有一个服务，其中的API将使用Angular中的HttpClientModule提供的GET请求功能进行访问，这反过来又会返回一个可观察变量。这个观察变量将被应用程序的一个组件订阅，然后显示在页面上。

示例:
The data.service.ts

import { Injectable } from '@angular/core';
//Importing HttpClientModule for GET request to API
import { HttpClient } from '@angular/common/http';
@Injectable({
  providedIn: 'root'
})
export class DataService {
 
  // making an instance for Get Request
  constructor(private http_instance: HttpClient ) { }
  // function returning the observable
  getInfo(){
    return this.http_instance.get('https://reqres.in/api/users')
  }
}

The reg-user.component.ts

import { Component, OnInit } from '@angular/core';
// Importing Data Service to subscribe to getInfo() observable
import { DataServiceService } from '../data-service.service'
@Component({
  selector: 'app-reg-user',
  templateUrl: './reg-user.component.html',
  styleUrls: ['./reg-user.component.css']
})
export class RegUserComponent implements OnInit {
 
  // instantiation of local object and the Data Service
  inst : Object;
  constructor(private data: DataServiceService ) { }
 
  //Subscription of the Data Service and putting all the
  // data into the local instance of component
  ngOnInit() {
    this.data.getInfo().subscribe((data)=>{
      this.inst=data;
    })
  }
 
}

RegUserComponent的Html中使用的指令。

<style>
ul {
    list-style-type: none;
    margin: 0;padding: 0;
}
 
    ul li {
        background: rgb(238, 238, 238);
        padding: 2em;
        border-radius: 4px;
        margin-bottom: 7px;
        display: grid;
        grid-template-columns: 60px auto;
    }
 
       ul li p {
            font-weight: bold;
            margin-left: 20px;
        }
 
       ul li img {
            border-radius: 50%;
            width: 100%;
        }
     
 
</style>
<h1>Users</h1>
 
<ul *ngIf="inst">
  <li *ngFor="let user of inst.data">
    <img [src]="user.avatar">
     
<p>{{ user.first_name }} {{ user.last_name }}</p>
 
  </li>
</ul>

输出:

使用Observable的Angular 7 Angular数据服务