Могу ли я запустить компонентный метод только на клиенте, использующем Angular2 Universal?

Question

Я пишу универсальное приложение angular2. У него есть диаграмма 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'
    });
  }
}

Есть ли что-то похожее на приведенный выше пример, который может позволить мне запустить только ngUniversalBrowser метод только в браузере OnInit?

Answer 1

import { isBrowser } from 'angular2-universal';

isBrowser - это логическое значение, которое вы можете импортировать в свой компонент, а затем выполнять код coditionaly, только если он работает на клиенте.

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

Answer 2

Я думаю, что получил ответ. Но это полный взлом, и я уверен, что они не собирались делать это.

Я сам попал в тупик (что заставило меня отключить угловой универсальный / предварительный рендеринг). Моя потеря может быть вашей выгодой.

Есть определенные объекты, которые недоступны при предварительном рендеринге. Преимущественно "окно", т. Е. "Документ.окно".

Почему бы вам не попробовать добавить условный оператор в ваш компонент, который проверяет, существует ли объект. Если это не так, загрузите свой желтый фон. В противном случае загрузите как обычно.

Я не уверен, означает ли это, что ваш компонент не сможет обновиться, когда "истинный" клиент завершит загрузку. Но я уверен, что вы можете настроить что-то, чтобы следить за "окном" и заставить это случиться.

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