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

Я пишу 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?

Ответы

Ответ 1

import { isBrowser } from 'angular2-universal';

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

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

Ответ 2

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

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

Есть определенные объекты, которые недоступны, когда вы выполняете предварительную визуализацию. В основном, "окно", то есть "document.window".

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

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

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