Javascript 角度通用和浏览器功能检查

使用jQuery或普通JavaScript开发web应用程序时，通常首先检查功能可用性。因此，例如，如果我想使用

document.oncopy

事件，我应该首先使用类似的内容，以确保我的代码不会因较小的浏览器而中断：

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

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

但是假设我希望在

document.oncopy

不可用时，某个特定的div不可见。我的理解是，不建议这样做：

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

因为那时我还在操纵DOM。请注意，我的示例是关于

document.oncopy

的，但是我可以选择任何没有通用支持的功能

我在Scotch上测试了这一点，并在他的主页模板末尾添加了以下内容：

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

支持

功能
不支持此功能

更新：有趣的是，它在不同的浏览器上给出了不同的结果。在Chrome55上，它正常运行，并显示“支持功能”消息。在IE11上，我收到了“不受支持”的消息。在这两种情况下，服务器日志都会显示一条

异常：未定义文档
消息，但页面看起来仍然完好无损

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

更新：
我还玩弄了在模板中使用一个字段，并从一个
ngAfterContentInit
似乎是一个很好的候选者，但也会在服务器上导致错误。它在浏览器中仍然运行良好，没有任何奇怪的效果（到目前为止我已经注意到了）。
有两种方法可以实现这一点：

仅在服务器渲染完成且客户端完全初始化（包括通过
preboot.js
重播用户事件）后执行检查
当页面在服务器上运行时，返回合理的默认值，并仅在浏览器中执行实际检查
我开始考虑第一种选择，但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核心，但最好不要编写太多特定于该平台的代码

import { isBrowser } from "angular2-universal";

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