Microsoft.AspNetCore.NodeServices在角OnInit中捕获RxJS IntervalObservable

Question

我试图在OnInit中使用IntervalObservable启动一个角4组件的重复客户端操作。应用程序使用ASP.NET核心。

执行可观察的订阅。但是，Microsoft.AspNetCore.NodeServices中的服务器端预录制似乎正在执行订阅--永远不会将呈现的页面返回到浏览器。

我在这里做错什么了？下面是复制的步骤。在这个示例中，我只是尝试在浏览器中console.log心跳。

复制步骤

1. 将cd创建到一个新目录中。
2. 运行dotnet new angular。
3. 运行npm install。
4. 用下面的代码片段替换ClientApp/app/components/home/home.component.ts的内容。
5. 运行dotnet run并转到http://localhost:5000。

    import { Component, OnInit } from '@angular/core';
    import { IntervalObservable } from "rxjs/observable/IntervalObservable";

    @Component({
        selector: 'home',
        templateUrl: './home.component.html'
    })
    export class HomeComponent implements OnInit {
        ngOnInit(): void {
            IntervalObservable.create(1500).subscribe((iteration:number)=>console.log(iteration));
        }
    }

当请求传入时，调试控制台将开始报告iteration，如代码片段所示。页面呈现程序超时，并最终返回一个错误页，但是IntervalObservable订阅继续在调试控制台中迭代。

Answer 1

我使用https://stackoverflow.com/a/46893433/402726中所示的技术找到了一个分辨率。

本质上，我们使用提供的platform函数来确定我们是否在浏览器中执行，如果是的话，运行浏览器中的心跳。

下面是实现修复的问题片段的更新形式。

import { PLATFORM_ID, Component, Inject, OnInit } from "@angular/core";
import { isPlatformBrowser } from "@angular/common";
import { IntervalObservable } from "rxjs/observable/IntervalObservable";

@Component({
    selector: "home",
    templateUrl: "./home.component.html"
})
export class HomeComponent implements OnInit {
    private isRunningInBrowser: boolean;
    constructor( @Inject(PLATFORM_ID) platformId: string) {
        this.isRunningInBrowser = isPlatformBrowser(platformId);
    }
    public ngOnInit(): void {
        if (!this.isRunningInBrowser) return;
        IntervalObservable.create(1000).subscribe(() => console.log("on an interval"));
    }
}