当ng2-nvd3图表不在视图范围内时,大小的浏览器错误会发生变化

Question

虽然使用ng2-nvd3结合角度2路由功能,我注意到控制台充满了以下错误:

d3.min.js:1 Error: <g> attribute transform: Expected number, "translate(NaN,5)"

我设法将问题指向一个用例:

• 将路径出口更改为指向具有ng2-nvd3图表的路线
• 将其更改回指向没有ng2-nvd3图表的路线
• 更改窗口的大小(或开发人员控制台的大小)
• 在控制台中查看错误

这个可以很容易地用这个plunker重现:

• 打开开发者控制台
• 单击"图表"链接
• 单击"无图表"链接
• 更改开发人员控制台(或浏览器窗口的大小 - 相同的效果) - 确保释放鼠标按钮而不仅仅是更改大小.
• 控制台中出现错误

怎么能避免这个错误？

Answer 1

在ng2-nvd3 源代码行118中,我们可以看到正在注册调整大小的处理程序

self.chart.resizeHandler = nv.utils.windowResize(function() {...})

当图表离开视图时(例如上面的情况),需要清除此调整大小处理程序 - 但它不会自动发生.

要解决这个问题,需要通过添加来获得对图表本身的引用

@ViewChild('chart') chart;

到组件(并通过向#chartnvd3元素添加属性来命名模板中的图表)这将允许我们调用

this.chart.chart.resizeHandler.clear();

从resize事件中清除处理程序.但是我们仍然需要知道图表何时不在视图中 - 有很多方法可以实现这一点,每个方法都有自己的细微之处(ngOnDestroy/ ngOnChanges等等).对我有用的那个虽然有点咄咄逼人,却彻底解决了这个问题:

我已经将根路由器注入主组件并订阅了对它的更改,通过服务委托它们EventEmitter 然后我将该服务注入图表组件并注册到该事件(据我检查,你可以只是将路由器注入图表组件,因为它不是根路由器,而是一些子路由器,因此不会获得所有路由更改)在事件处理程序中我创建了一次性调用

this.chart.chart.resizeHandler.clear();

RoutingService:

import { Injectable, EventEmitter } from 'angular2/core';

@Injectable()
export class RoutingService {
    public onRouteChange$: EventEmitter<string>;

    constructor() {
        this.onRouteChange$ = new EventEmitter();
    }

    routeChange(route: string) {
        this.onRouteChange$.emit(route);
    }
}

MainComponent 构造函数:

  constructor(private router:Router, private routingService:RoutingService){
    router.subscribe( val => routingService.routeChange(val));
  }

ChartComponent 构造函数:

  constructor(private routingService:RoutingService) {
    let sub:any = routingService.onRouteChange$.subscribe(route => {
        if (route != 'chart') {
            this.chart.chart.resizeHandler.clear();
            if (sub) {
              sub.unsubscribe();
            }
        }
    });
  }

你可以在这个plunker中看到它