角度6：コンポーネントがサービスまたは他のコンポーネントから可視であるかどうかを制御します

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、これを行うより良い方法がない限り？

angular

typescript

angular6

回答 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);
      });
   }

あなたの答え

関連記事