重现步骤

Question

我正在尝试使用OnInit在Angular 4组件的IntervalObservable内启动重复的客户端操作。该应用程序使用ASP.NET Core。

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

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

重现步骤

创建并cd到新目录。
运行dotnet new angular。
运行npm install。
将ClientApp/app/components/home/home.component.ts的内容替换为下面的代码段。
运行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中显示的技术找到了一个分辨率。

基本上，我们使用Angular提供的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"));
    }
}

Microsoft.AspNetCore.NodeServices在Angular OnInit期间捕获RxJS IntervalObservable

重现步骤

1 个答案: