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

Posted 2023-02-22

【中文标题】我可以只在使用 Angular2 Universal 的客户端中运行组件方法吗？

【英文标题】：Can I run a component method only in the client using Angular2 Universal?

【发布时间】：2016-11-27 17:06:03

【问题描述】：

我正在编写一个angular2 universal 应用程序。它有一个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'
    );
  

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

【参考方案1】：

import  isBrowser  from 'angular2-universal';

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

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

【讨论】：

查看此答案以了解更新的执行方式 (2021) ***.com/a/46893433/226513

【参考方案2】：

我想我得到了答案。但这是一个完整的 hack，我敢肯定他们不打算让你这样做。

我自己陷入了死胡同（这迫使我关闭了 angular-universal/prerendering）。我的损失可能是你的收获。

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

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

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

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