我只能在使用Angular2 Universal的客户端中运行组件方法吗

Can I run a component method only in the client using Angular2 Universal?

本文关键字：客户端 运行 组件 方法 Universal Angular2      更新时间：2023-09-26

我正在编写一个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'
    });
  }
}

有没有像上面的例子一样的东西可以让我只在浏览器OnInit中运行ngUniversalBrowser方法？

import { isBrowser } from 'angular2-universal';

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

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

我想我得到了答案。但这完全是一次黑客攻击，我相信他们并没有打算让你这么做。

我自己也陷入了死胡同（这迫使我关闭了角度通用/预渲染）。我的损失可能就是你的收获。

有些特定对象在预渲染时不可用。主要是"窗口"，即"文档.窗口"。

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

我不确定这是否意味着当"真正的"客户端完成加载时，您的组件将无法刷新。但我相信你们可以为"窗口"设置一些监视并使其发生。

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

相关文章：