bugfix> angular > 投稿

スピナーを持つコンポーネントがあり、app.component.htmlに配置されています

<app-spinner *ngIf="isLoading"></app-spinner>

app.component.tsで、isLoadingをFalseに設定して始めました。

次に、getDataなどのメソッドを含むサービスがあります。

getData() {
    // show spinner
    this.http.get('url here');
    // Hide Spinner
}

私の質問は...スピナーがapp.component.htmlと.tsにあり、それを表示および非表示にする変数がある場合...他のコンポーネントまたはアプリに存在するサービスからその値を変更する方法。 component.ts、これを行うより良い方法がない限り?

回答 2 件
  • 使用する件名 またはBehaviorSubject サービス内で、コンポーネントの同じサブスクライブメソッドを使用して、最新の値を取得します。

    service.tsファイル

    isLoading = true;
    public loader = new BehaviorSubject(isLoading)
    getData(){
     this.http.get(this.url).subscribe(()=>{
      this.isLoading = false
      this.loader.next(this.isLoading)
    })
    
    

    .component.ts

    ngOnInit(){
     this.testService.loader.subscribe(value=>console.log(value))
    }
    
    

  • app.component.tsのサービスメソッドをサブスクライブし、次の場合にisLoadingブール値を設定します。申し込む サービスのgetData()メソッドの応答に対して。

      getDataFromService() {
        // show spinner whilst waiting for the request
        this.isLoading = true;
        this.yourServiceName.getData()
          .subscribe(res => {
            // Hide spinner when res is received
            this.isLoading = false;
            // do something with the repsonse
            console.log(res);
          });
       }
    
    

あなたの答え