在 Observable.bindCallback() 上的 zone.run()答案

【问题标题】：zone.run() on Observable.bindCallback()在 Observable.bindCallback() 上的 zone.run()
【发布时间】：2018-08-19 08:02:07
【问题描述】：

我正在使用 Electron，您可能知道，Electron 的所有调用都在 Angular 的 zone 之外运行。因此，在使用 Electron 方法时，您需要在某个时候调用 zone.run()。

典型的 Electron 调用如下所示（注意 zone.run()）：

    this.remote.dialog.showOpenDialog(
        {
            properties: ['openDirectory'],
        },
        (directories) => {
            const projectName = path.basename(directories[0]);

            this.zone.run(() => {
                cb(projectName);
            });
        },
    );

以上工作非常好。我是一个快乐的人。我现在可以走开，接受这个。但是，我想用Observables 写这个，所以它可以很好地与应用程序的其他方面联系起来。

    const openDialog = Observable.bindCallback(this.remote.dialog.showOpenDialog);
    return openDialog({
        properties: ['openDirectory'],
    }).map((directories) => {
        const projectName = path.basename(directories[0]);
        // WHERE DO I PUT ZONE.RUN?
        return projectName;
    });

我应该把zone.run放在哪里？

【问题讨论】：

标签： angular rxjs electron angular2-observables zone.js

【解决方案1】：

zone.js 有涵盖 rxjs / electron api 补丁的文档：https://github.com/angular/zone.js/blob/master/NON-STANDARD-APIS.md#usage

【讨论】：

【解决方案2】：

为什么不在订阅完成中加入“运行”提示：

}).map((directories) => {
        const projectName = path.basename(directories[0]);
        this.zone.run();  // <---- Right here?
        return projectName;
    });

【讨论】：

因为那是无效的语法。你需要做this.zone(() => { // INSIDE ZONE NOW })

【解决方案3】：

所有电子API都打了补丁，你需要在加载zone.js之后把这行放在polyfill.ts中。

//import 'zone.js/dist/zone'; // originally added by angular-cli, comment it out
import 'zone.js/dist/zone-mix'; // add zone-mix to patch both Browser and Nodejs
import 'zone.js/dist/zone-patch-electron'; // add zone-patch-electron to patch Electron native API

我还创建了一个示例 repo https://github.com/JiaLiPassion/zone-electron

【讨论】：