2

在使用 ng2-nvd3 和 angular 2 路由功能时，我注意到控制台充满了以下错误：

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

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

  • 将 route-outlet 更改为指向带有 ng2-nvd3 图表的路线
  • 将其改回指向没有 ng2-nvd3 图表的路线
  • 更改窗口大小（或开发者控制台大小）
  • 在控制台中查看错误

这可以很容易地用这个plunker 复制：

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

如何避免这个错误？

4

1 回答 1

5

在 ng2-nvd3源代码第 118 行中，我们可以看到注册了一个调整大小处理程序

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

当图表消失时（如上例），需要清除此调整大小处理程序 - 但它不会自动发生。

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

@ViewChild('chart') chart;

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

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

从调整大小事件中清除处理程序。但是我们仍然需要知道图表何时不在视野范围内 - 有很多方法可以实现这一点，每种方法都有自己的微妙之处（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();
            }
        }
    });
  }

你可以在this plunker中看到它

于 2016-05-02T07:32:59.847 回答