我已经在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(胖箭头)功能()=> {}将保留全局范围,以便您使用路由器.