角度ユニバーサルとブラウザの機能チェック

Question

jQueryまたは通常のJavaScriptを使用してWebアプリケーションを開発する場合は、まず機能の可用性をチェックすることが一般的です。私はdocument.oncopyイベントを使用したい場合、たとえば、私が最初に私のコードは低いブラウザでは壊れないことを確認するために、このような何かを持っている必要がありますので：

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

私はこれがどのように動作するかについて少し困惑していますAngular2で表します。私はブラウザでのみ実行することを期待しても私はまだ同じを使用することができますが、私はアンギュラユニバーサルを使用し、代わりにテンプレートやDomRendererに依存する場合は、DOMを一人で残すように言われています。これにより、ページがサーバー上で事前レンダリングされ、本当に印象的なパフォーマンスが向上します。

しかし、document.oncopyが利用できない場合、特定のdivを非表示にしたいとします。

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

と

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

その後、私はまだDOMを操作していますので：私の理解では、これは推奨されないということです。私の例はdocument.oncopyについてですが、私は普遍的なサポートを持っていない機能を選ぶことができます。

私はスコッチのChris Nwamba's tutorialを使用して、これをテストし、彼のホームテンプレートの最後に次を追加しました：

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

更新：を興味深いことに、それは異なるブラウザで異なる結果を与えました。 Chrome 55では、通常と同じように実行され、「機能がサポートされています」というメッセージが表示されました。 IE11では、「サポートされていません」というメッセージが届きました。どちらの場合も、サーバログにはEXCEPTION: document is not definedというメッセージが表示されますが、ページはまだ完全に大丈夫です。

したがって、アンギュラユニバーサルを使用する場合、ブラウザの機能を確認する正しい方法は何ですか？

アップデート：私は、テンプレート内のフィールドを使用してlife cycle hooksのいずれかからそのフィールドを割り当てることで周りのおもちゃ 。 ngAfterContentInitは素晴らしい候補のようですが、サーバーでもエラーが発生します。まだブラウザでうまく動いていて、奇妙な効果はありません（私がこれまで気づいたこと）。

Answer 1

これにアプローチするには、2つの方法があります。

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をインポートして使用してください。ノードとASP.NETコアを区別する方法は明白ではないようですが、あまりにも多くのコードを書かないようにするのがベストですプラットフォーム固有のコード。