我可以只在使用 Angular2 Universal 的客户端中运行组件方法吗?
Posted
技术标签:
【中文标题】我可以只在使用 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
【讨论】:
以上是关于我可以只在使用 Angular2 Universal 的客户端中运行组件方法吗?的主要内容,如果未能解决你的问题,请参考以下文章
angular2 必须使用 nodejs,我可以使用 apache 服务器运行吗?
Angular2 中的 ViewChildren 装饰器可以与接口一起使用吗?