11

angular2 ユニバーサルアプリを作成しています。d3チャートがありますが、クライアント側 (ブラウザー) でのみ d3 チャートをレンダリングし、サーバーではレンダリングしないことを望んでいました。クライアント側でのみコンポーネントメソッドのみを実行するangular2ユニバーサルのインターフェースはありますか?

すなわち

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'
    });
  }
}

上記の例のようngUniversalBrowserに、ブラウザでのみメソッドを実行できるものはありOnInitますか?

4

2 に答える 2

5 
import { isBrowser } from 'angular2-universal';

isBrowser はブール値であり、コンポーネントにインポートして、クライアントで実行されている場合にのみコードをコード実行できます。

if (isBrowser) {
     // this will not run on server
}
于 2016-09-24T14:47:16.363 に答える
1

答えが出たと思います。しかし、それは完全なハッキングであり、彼らはあなたがこれを行うことを意図していなかったと確信しています.

私は自分自身で行き止まりに遭遇しました（これにより、angular-universal / prerenderingをオフにする必要がありました）。私の損失はあなたの利益かもしれません。

プレレンダリング時に使用できない特定のオブジェクトがあります。主に「window」、つまり「document.window」です。

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

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

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

于 2016-08-14T05:58:16.347 に答える