不会触发从组件订阅方法的时间间隔设置

Question

我正在angular8客户端应用程序中实现一项功能，该功能每10秒检查一次.net核心API是否可用。我基本上已经将计时器设置为10秒这将对检查可用性的服务中的方法执行ping操作。此逻辑在“脱机”组件中创建。由于某种原因，直到停止服务，我才看到轮询的发生。你能让我知道我在哪里吗出问题了吗？

脱机组件在App.Module的声明部分中声明

连接服务

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { ConfigurationService } from "./configuration.service";

@Injectable()
export class ConnectionService {

    constructor(private httpClient: HttpClient, private configurationService: ConfigurationService) { }

    checkIfCoreApiIsAvailable() {
        var pingUrl = this.configurationService.baseUrl + "/api/online";
        return this.httpClient.get(pingUrl, { observe: 'response' });
    }
}

离线组件

@Component({
    selector: 'not-found',
    templateUrl: './offline.component.html',
    styleUrls: ['./offline.component.css'],
    animations: [fadeInOut]
})
export class OfflineComponent implements OnInit {
    subscription: Subscription;
    pingInterval: number;

    constructor(private connectionService: ConnectionService) {
        // Check if Core-API service is Online or Offline
        //this.pingInterval = environment.corePingIntervalSeconds;

        const source = timer(0, environment.corePingIntervalSeconds * 1000);
        source.subscribe(() => {
            this.connectionService
           .checkIfCoreApiIsAvailable()
           .pipe(first())
           .subscribe(resp  => {
             if (resp.status === 200 ) {
               console.log(true)
             } else {
               console.log(false)
             }
           }, err => console.log(err));
         });
        }

    ngOnInit() {
    }

    ngOnDestroy() {
        if(this.subscription) {
             this.subscription.unsubscribe();
        }
     }
}

Answer 1

由于不加载OfflineComponent，因此应考虑在可以以root用户身份提供的服务中使用此逻辑

Answer 2

您需要确保将组件添加到某些模板：

<not-found></not-found>

您应该删除.pipe(first())行。

您仅在第一次迭代中起作用。有关更多信息，请参阅文档：https://www.learnrxjs.io/operators/filtering/first.html

编辑：

正如您在评论中所说，您不需要将此功能作为组件添加，因为您不需要/不需要与之关联的HTML。这就是为什么我认为您应该使用该服务的原因。这可能是一个选择：

修改服务以在新方法中包含组件中的功能，例如startChecking：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { ConfigurationService } from "./configuration.service";

@Injectable()
export class ConnectionService {

    constructor(private httpClient: HttpClient, private configurationService: ConfigurationService) { }

    startChecking() { 

        const source = timer(0, environment.corePingIntervalSeconds * 1000);
        source.subscribe(() => {
            this.checkIfCoreApiIsAvailable()
                .subscribe(resp  => {
                    if (resp.status === 200 ) {
                        console.log(true)
                    } else {
                        console.log(false)
                    }
                }, err => console.log(err));
            });
        }
    }

    private checkIfCoreApiIsAvailable() {
        var pingUrl = this.configurationService.baseUrl + "/api/online";
        return this.httpClient.get(pingUrl, { observe: 'response' });
    }
}

然后，在您的应用开始时使用该服务：

/// ...
class AppComponent implements OnInit {
    constructor (private connectionService : ConnectionService ) {
        //
    }

    ngOnInit() {    
        /// ...    
        this.connectionService.startChecking(); 
    }  

    /// ...
}
/// ...