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

是否有类似上述示例的内容可能只允许我在浏览器ngUniversalBrowser中运行OnInit方法？

Answer 1

import { isBrowser } from 'angular2-universal';

isBrowser是一个布尔值，您可以在组件中导入，然后只有在客户端上运行时才执行代码。

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

Answer 2

我想我得到了答案。但这是一个完整的黑客攻击，我相信他们并不打算让你这样做。

我自己遇到了一个死胡同（这迫使我关掉了角度通用/预渲染）。我的损失可能是你的收获。

预渲染时，有些特定对象不可用。主要是“窗口”，即“document.window”。

为什么不尝试在组件中添加条件语句来检查对象是否存在。如果没有，请加载黄色背景。否则，正常加载。

我不确定这是否意味着当“true”客户端完成加载时，您的组件将无法刷新。但我相信你可以设置一些东西来观察“窗口”并实现它。

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

我是否可以仅在使用Angular2 Universal的客户端中运行组件方法？

2 个答案: