Angular學習系列八：調用服務方法

1：創建服務：ng g service services/request

2：使用rxjs就需要在service 中引用: import { Observable } from 'rxjs';

3：在組件中引用服務：

import { RequestService } from '../../services/request.service';

constructor(public req: RequestService)

 

4：學習目標：調用服務方法，使用回調方法獲取服務方法，使用異步promise獲取，使用rxjs異步獲取數據

 

request.service.ts

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
@Injectable({
  providedIn: 'root'
})
export class RequestService {

  constructor() { }

  //同步方式
  getData() {
    alert("我是服務方法");
  }

  //回調方式
  getCallbackData(cb) {
    setTimeout(() => {

      var username = 'xiao ming--callback';
      // return data;
      cb(username);
    }, 1000);
  }

  //promise
  getPromiseData(){

    return new Promise((resolve,reject)=>{

      setTimeout(() => {
        var username = 'xiao ming--promise';
        resolve(username);
      }, 1000);
    });
  }

  //rxjs
  getRxjsData(){

    return new Observable((obj)=>{

      setTimeout(() => {
        var username="xiao hong -- rxjs";
        obj.next(username);
      }, 3000);

    });
  } 
}

home.component.ts

import { Component, OnInit} from '@angular/core';
import { RequestService } from '../../services/request.service';
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
 
  constructor(public req: RequestService) { }

  ngOnInit() {
  }
  
  getServiceMethod() {
    this.req.getData();
  }


  //回調 獲取異步數據
  getAsyncMethod() {
    this.req.getCallbackData((uname) => {
      alert(uname);
    })
  }

  //promise獲取異步數據
  getPromiseMethod() {
    var pro = this.req.getPromiseData();
    pro.then((data) => {
      alert(data);
    });
  }

  //rxjs獲取異步數據
  getRxjsMethod() {

    var rxjsdata = this.req.getRxjsData();
    var start = rxjsdata.subscribe((data) => {
      alert(data);
    });

   
  }


  removeRxjsMethod() {

    var rxjsdata = this.req.getRxjsData();
    var start = rxjsdata.subscribe((data) => {
      alert(data);
    });

    setTimeout(() => {
      start.unsubscribe();//取消訂閱：由於上面方法執行3s中，在1s后，就取消了該請求
    }, 1000);
  }

}

home.component.html

<button (click)="getServiceMethod()">我可以調用服務里面的方法哦（同步）</button>
<br>

<button (click)="getAsyncMethod()">我可以調用服務里面的方法哦（異步-callback)</button>
<br>

<button (click)="getPromiseMethod()">我可以調用服務里面的方法哦（異步-promise）</button>
<br>
<button (click)="getRxjsMethod()">我可以調用服務里面的方法哦（異步-rxjs）</button>
<br>
<button (click)="getRxjsMethod()">我可以調用服務里面的方法哦（rxjs,取消訂閱）</button>
<p>home works!</p>
<hr>

 

界面效果：