Angular 10：如何关闭预加载器？

Question

我有一个预加载器，收到消息后应该立即关闭

import { Component, OnInit } from '@angular/core';
import { PreloaderService } from 'src/app/services/preloader.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss'],
})
export class HomeComponent implements OnInit{
  constructor(private preloaderService: PreloaderService) {}
  
  ngOnInit(): void {
    this.preloaderService.showPreloader();
    window.addEventListener('message', function(event) {      
          console.log(event);      
  });
  
  }   
}

使用 function 关闭预加载器

this.preloaderService.hidePreloader();

我的预加载器服务：

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';

@Injectable({
    providedIn: 'root'
})
export class PreloaderService {
    private isPreloaderVisibleSubject: BehaviorSubject<boolean> = new BehaviorSubject(false);
    private preloaderProgressSubject: BehaviorSubject<number> = new BehaviorSubject(0);

    isPreloaderVisible: Observable<boolean> = this.isPreloaderVisibleSubject.asObservable();
    preloaderProgress: Observable<number> = this.preloaderProgressSubject.asObservable();

    constructor() {}

    updatePreloaderProgress(value: number) {
        this.preloaderProgressSubject.next(value);
    }

    showPreloader() {
        this.isPreloaderVisibleSubject.next(true);
    }

    hidePreloader() {
        this.isPreloaderVisibleSubject.next(false);
    }
}

但我不明白如何结合消息和预加载器

Answer 1

试试下面的代码。 我相信这会解决你的问题。

ngOnInit(): void {
  var self = this;
  this.preloaderService.showPreloader();
  window.addEventListener('message', function(event) {
    self.preloaderService.hidePreloader();
  }); 
}

Answer 2

如果您的事件意味着它是加载的，那么就这样写：

ngOnInit(): void {
  this.preloaderService.showPreloader();
  window.addEventListener('message', function(event) {
    this.preloaderService.hidePreloader();
  }); 
}