Angular 2 HTTP呼び出しの遅延を追加する方法

Question

TypeScriptでAngular 2を使用して、RESTサーバーへのHTTP呼び出しを使用するWebアプリケーションを実装しています。

問題はいくつかのGET呼び出しが他のものより速く、それらの前にいくつかの遅延を追加する必要があるということです。この遅延を取り除き、この問題を適切に処理するにはどうすればよいですか？

たとえば、製造元を削除した後（下のコードで）、すべての製造元（ngOnInit（）内のGET呼び出しを実装している）が表示されるビューに戻ってください。

import { Component, OnInit, OnDestroy } from '@angular/core'; 
import { Router, ActivatedRoute } from '@angular/router'; 
import { DataService } from '../../../data/data.service'; 
import { CallManufacturerServices } from '../calls/calls.service'; 
import { ManufacturerClass } from '../class/manufacturer.class'; 

@Component({ 
    templateUrl: './app/inventory/manufacturer/view/view.component.html', 
    styleUrls: ['./app/inventory/manufacturer/view/view.component.css'], 
    providers: [CallManufacturerServices] 
}) 

export class ViewComponent implements OnInit, OnDestroy { 
    private sub: any; 
    private ServerData: ManufacturerClass = { 
     ManufacturerId: 0, 
     ManufacturerName: 'N/D', 
     ManufacturerWebSite: 'N/D' 
    }; 

    constructor(
     private route: ActivatedRoute, 
     private router: Router, 
     private data: DataService, 
     private calls: CallManufacturerServices) { 
    } 

    ngOnInit() { 
     this.sub = this.route.params.subscribe(params => { 
      let id = +params['id']; 
      this.getSingleManufacturer(id); 
     }); 
    } 

    ngOnDestroy() { 
     this.sub.unsubscribe(); 
    } 

    private getSingleManufacturer(id: number) { 
     this.calls.GetSingleManufacturer(id).subscribe(
      (data) => { 
       this.ServerData = data.json(); 
      }, 
      error => console.log(error), 
      () => console.log('getSingleManufacturer complete!') 
     ); 
    } 

    private deleteManufacturer(_manufacturer: ManufacturerClass) { 
     this.calls.DeleteManufacturer(_manufacturer.ManufacturerId).subscribe(
      error => console.log(error), 
      () => console.log('deleteManufacturer complete!') 
     ); 
     /* this type of delay doesn't work */ 
     setTimeout(() => {}, 2000); // insert there the delay 
     /* when I go to Manufacturer the Get call will start */ 
     this.goToManufacturer(); 
    } 

    private goToManufacturer() { 
     this.router.navigate(['/inventory/manufacturer']); 
    } 

    private goToEdit(manufacturer: ManufacturerClass) { 
     this.router.navigate(['/inventory/manufacturer/edit', manufacturer.ManufacturerId]); 
    } 
} 

Answer 1

あなたは、このように、要求が正常に完了した後にのみ角度2ナビゲートを持つ必要があります：あなたは遅れを使用しないでください

this.calls.DeleteManufacturer(_manufacturer.ManufacturerId).subscribe(
 
     undefined, // onNext handler 
 
     error => console.log(error), // onError handler 
 
     () => { // onComplete handler 
 
      console.log('deleteManufacturer complete!'); 
 
      this.goToManufacturer(); 
 
     } 
 
    );