Question

我有一个角度分量，其中我有一个函数，另一个函数并入其中。

我只想在单击功能中绘制的按钮时更改页面。我无法访问在组件的构造函数中声明的路由器。那么有人知道怎么做吗？

这是我组件的代码：

export class EncoursComponent{



  constructor(private serviceData : DataService, private router : Router) {
  }


  }

  //Fonction qui permet de dessiner les lignes et les points
  draw(id: any, events: any, options: any) {


    //Ici on définit les points
    svg.selectAll("circle")



      //I want that when I click, be redirected no another page
      .on("click", function(d: any) {
        var data : DataService = new DataService();

        //This line doesn't work
        var rout : Router = new Router();

        //I can't acces to this.router
        this.router.navigate("/affecter");


      });
  }

Answer 1

这是因为function有自己的范围。您可以将function更改为箭头功能，如下所示


    svg.selectAll("circle")



      //I want that when I click, be redirected no another page
      .on("click", (d: any) => {
        var data : DataService = new DataService();

        //This line doesn't work
        var rout : Router = new Router();

        //I can't acces to this.router
        this.router.navigate("/affecter");


      });

Answer 2

您可以像这样将路由器注入到组件中

constructor (private router: Router) {}

接下来，我将内部函数更改为arrow function，以获取类（您的组件）的this范围。现在，您可以使用this.router.navigate('/path')

进行导航

如何将路线更改为功能？

2 个答案: