Angular2 Universalを使用してクライアントでのみコンポーネントメソッドを実行できますか？

Question

私はangular2 universalアプリを書いています。それはd3グラフを持っていますが、私はクライアント側（ブラウザ）でd3チャートをレンダリングし、それをサーバー上でレンダリングしようとはしませんでした。コンポーネントのメソッドをクライアント側でのみ実行する、angular2 universalのインターフェースはありますか？すなわち

class ComponentWithChart implements OnInit, ngUniversalBrowser { 

    elem; 

    constructor(private viewContainerRef:ViewContainerRef) {} 

    ngUniversalBrowserOnInit() { 

    this.elem = this.viewContainerRef.element.nativeElement; 

    d3.select(this.elem).append('div').style({ 
     'background-color':'yellow' 
    }); 
    } 
} 

は私が唯一のブラウザのみOnInitでngUniversalBrowser方法を実行できるようにするかもしれない上記の例のようなものはありますか？

Answer 1

私は答えがあると思います。しかし、それは完全なハックだ、私は彼らがあなたのためにこれを行うつもりはなかったと確信しています。

私は自分自身に行き渡りました（角度ユニバーサル/プレレンダリングをオフにしなければなりませんでした）。私の損失があなたの利益になるかもしれません。

レンダリング前に使用できない特定のオブジェクトがあります。主に、 "window"、すなわち "document.window"です。

コンポーネントにオブジェクトが存在するかどうかをチェックする条件文を追加してみてください。そうでない場合は、黄色の背景を読み込みます。それ以外の場合は、通常通りロードしてください。

"真の"クライアントの読み込みが完了したときにコンポーネントが更新されないことを意味するかどうかはわかりません。しかし、私はあなたが "窓"を見るために何かを設定し、それを実現させることができると確信しています。

ngInit() { 
 
    if (!window) { 
 
     // yellow background placeholder 
 
    } else 
 
     // real plumbing 
 
    } 
 
}

Answer 2

import { isBrowser } from 'angular2-universal'; 

isBrowserはあなたのコンポーネントにインポートして、それがクライアント上で実行している場合にのみcoditionalyコードを実行することができますブール値です。

if (isBrowser) { 
    // this will not run on server 
}