javascript - Angular Universal 和浏览器功能检查

Question

在使用 jQuery 或普通 JavaScript 开发网络应用程序时，通常首先检查功能可用性。因此，例如，如果我想使用 document.oncopy 事件，我应该首先使用类似这样的东西来确保我的代码不会因较小的浏览器而中断:

if ("oncopy" in document) {
  // Feature is available
}

我对这在 Angular2 中的工作方式感到有点困惑。如果我希望只在浏览器中运行，我仍然可以使用相同的方法，但如果我想使用 Angular Universal 并依赖于模板或 DomRenderer，我会被特别告知不要管 DOM。这允许页面在服务器上预呈现，并提供真正令人印象深刻的性能提升。

但假设我希望在 document.oncopy 不可用时隐藏特定的 div。我的理解是不推荐这样做:

<div *ngIf="hasFeature()">...</div>

和

hasFeature() {
  return 'oncopy' in document;
}

因为那时我还在操作 DOM。请注意，我的示例是关于 document.oncopy 的，但我可以选择任何没有普遍支持的功能。

我使用 Chris Nwamba's tutorial 对此进行了测试在 Scotch 上并将以下内容添加到他的主页模板的末尾:

<div *ngIf="hasFeature()">Feature is supported</div>
<div *ngIf="!hasFeature()">Feature is NOT supported</div>

更新:有趣的是，它在不同的浏览器上给出了不同的结果。在 Chrome 55 上，它正常执行并显示“功能受支持”消息。在 IE11 上，我收到了“不支持”的消息。在这两种情况下，服务器日志都显示了一条 EXCEPTION: document is not defined 消息，但页面看起来仍然没有问题。

那么，如果我想使用 Angular Universal，检查浏览器功能的正确方法是什么？

更新: 我还尝试在模板中使用一个字段并从 life cycle hooks 之一分配该字段. ngAfterContentInit 看起来是个不错的选择，但也会导致服务器出错。它在浏览器中仍然运行良好，没有奇怪的效果(到目前为止我已经注意到)。

Answer 1

有两种方法可以解决这个问题:

1. 仅在服务器完成渲染且客户端完全初始化(包括由 preboot.js 完成的用户事件重放)后才进行检查。
2. 当页面在服务器上运行时返回一个合理的默认值，并只在浏览器中执行实际检查。

我开始考虑第一个选项，但是 Angular2 生命周期事件都对此没有帮助。事实上，您可以清楚地看到它们都在服务器上执行，然后才在客户端执行。

然后我开始在 preboot.js 中寻找可用的东西，但很快意识到它比需要的更复杂。

所以我选择了选项 2。事实证明，检查浏览器与导入和检查 isBrowser 一样简单。

import { isBrowser } from "angular2-universal";

@Component({
 // All the usual stuff
})
export class MyComponent {
  // ...
  hasFeature(): boolean {
    return isBrowser && 'oncopy' in document;
  }
  // ...
}

然后使用我在问题中展示的模板。

要检查您是否在服务器上运行，请以完全相同的方式导入和使用 isNode。似乎没有明显的方法来区分 Node 和 ASP.NET Core，但也许最好不要编写太多特定于平台的代码。