Angular 通用和浏览器功能检查

Question

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

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

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

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

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

和

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

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

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

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

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

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

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

Answer 1

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

仅在服务器完成渲染且客户端完全初始化（包括 preboot.js 完成的用户事件重放）后才进行检查。
Return 当页面在服务器上运行并且仅在浏览器中执行实际检查时的合理默认值。

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

然后我开始寻找在 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，但也许最好不要写太多特定于平台的代码。

Angular 通用和浏览器功能检查

Angular Universal and browser feature checks

javascript

feature-detection

typescript

angular