我已经在Angular 4中实现了NVD3图表.在回调函数内写了一个Click事件,点击图表我试图导航到另一个组件,但我无法导航.
代码：
import { Router} from '@angular/router';
export class MyNewComponentComponent implements OnInit {
constructor(public router: Router)
{
}
this.options = {
chart: {
type: 'discreteBarChart',height: 450,margin : {
top: 20,right: 20,bottom: 50,left: 55
},x: function(d){return d.label;},y: function(d){return d.value;},showValues: true,valueFormat: function(d){
return d3.format(',.4f')(d);
},duration: 500,xAxis: {
axisLabel: 'X Axis'
},yAxis: {
axisLabel: 'Y Axis',axisLabelDistance: -10
},callback: function(chart){
chart.discretebar.dispatch.on('elementClick',(angularEvent,e) => {
console.log("Inside click");
this.router.navigate(["/app-new-component2"]);
});
}
}
}
}
等待建议.提前致谢 ..
解决方法
所以你的问题就在这里
callback: function(chart){ // note the callback function
chart.discretebar.dispatch.on('elementClick',e) => {
console.log("Inside click");
this.router.navigate(["/app-new-component2"]);
});
}
因此,在您的回调所在的位置,您正在使用es5函数(),这意味着该函数中的任何内容都不会保留全局范围,而是创建一个新范围.所以在这种情况下你做这个.router.navigate你没有引用组件(全局这个)你引用的函数范围没有路由器.所以你想要做的就是这个,
callback: (chart) => {
chart.discretebar.dispatch.on('elementClick',e) => {
console.log("Inside click");
this.router.navigate(["/app-new-component2"]);
});
}
使用ES6(胖箭头)功能()=> {}将保留全局范围,以便您使用路由器.
