我已经在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', (angularEvent,e) => {
console.log("Inside click");
this.router.navigate(["/app-new-component2"]);
});
}
所以你的回调在哪里,你使用的是es5 function()
,这意味着该函数中的任何东西都不会占据全局范围this
,而是创建一个新的范围。所以在这种情况下当你做this.router.navigate
时你没有提到组件(全局this
)你指的是没有this
的函数范围router
。所以你想要做的就是这个,
callback: (chart) => {
chart.discretebar.dispatch.on('elementClick', (angularEvent,e) => {
console.log("Inside click");
this.router.navigate(["/app-new-component2"]);
});
}
使用ES6(胖箭头)功能() => {}
将保留全局范围this
,它将让你使用你的路由器。