Angular 通用使用分配函数给 window

Question

我正在尝试为 angular 通用中的 window 分配一个函数。最初我是这样做的：

declare global {
  interface Window {
    displayPreferenceModal: any;
  }
}

window.displayPreferenceModal = window.displayPreferenceModal || function () {};

当用户点击一个按钮时，我调用了这个方法：

public openModal(e: any) { e.preventDefault();

window.displayPreferenceModal();

}

这在本地有效，但在部署时无效。我意识到这是因为我使用的是 angular 通用，所以我尝试这样修复它：

declare global {
  interface Window {
    displayPreferenceModal: any;
  }
}

export function inokeDisplayPreferenceModal() {
  return typeof window !== 'undefined'
    ? (window.displayPreferenceModal =
        window.displayPreferenceModal || new Function())
    : new Function();
}

我将其作为提供者添加到我的模块中：

providers: [
  {
    provide: 'displayPreferenceModal',
    useFactory: inokeDisplayPreferenceModal,
  },
],

然后我将我的组件方法更新为：

public openModal(e: any) {
  e.preventDefault();

  if (isPlatformServer(this.platformId)) return;

  this.displayPreferenceModal();
}

同样，这在本地有效，这一次在部署时它不会抛出任何错误，但是当点击按钮时没有任何反应。我有一个控制台日志，它 returns 和匿名函数 :(

有谁知道我可以做些什么来完成这项工作？

Answer 1

ts:3.9.7/angular:8.2.4

将这些代码添加到 main.ts

declare global {
  interface Window {
    foo: any;
  }
}
window.foo =
  window.foo ||
  function () {
    console.log("OK!");
  };

效果不错！我已经在开发模式和部署在 nginx

中进行了测试

Angular 通用使用分配函数给 window

Angular Universal using assigning a function to the window

angular-universal

angular