Highcharts angular 2通过使用routerLink指令单击xAxis标签链接应用程序的各个部分

如何使用routerLink指令使我的xAxis标签链接到我的应用程序的其他部分

说：

xAxis:{
类别：[{
名字：“亚尼克”，
id:'1'
}, {
姓名：“马修”，
id:'2'
}, {
姓名：'鲍勃'，
id:'3'
}, {
姓名：'理查德'，
id:'4'
}, {
名字：“琳达”，
id:'5'
}],
标签：{
格式化程序：函数（）{
返回“”；
},
useHTML:true
}
},

我希望能够通过单击x轴标签之一导航到特定的员工页面。它与href=“”一起工作。到目前为止还不错，但我想使用指令routerLink而不是href。为此，我需要这样做：

labels: {
        formatter: function(){
          return '<a [routerLink]="['+ '/employee' +', '+ this.value.id +']">' + this.value.name + '</a>';
        },
        useHTML: true
      }
    },

标签：{
格式化程序：函数（）{
返回“”+this.value.name+“”；
},
useHTML:true
}
},

但当我点击其中一个标签时，什么都没有发生。。。 知道为什么吗？如何解决这个问题？甚至可以在格式化程序函数中使用指令吗？我应该尝试另一种方法吗

---

谢谢你的回答

它不起作用，因为在格式化程序回调中，您返回字符串，该字符串通过Highcharts附加到DOM中-基本上，它绕过了angular基础结构。如果您熟悉angularjs（1.x），那么在添加DOM元素（工具提示）之后，您需要$compile之类的东西来编译它。在angular 1中可以很容易地实现，不幸的是在angular 1中，这个过程变得很复杂-看答案哇…这显然太复杂了。谢谢你的回答，我会想办法的。

labels: {
        formatter: function(){
          return '<a [routerLink]="['+ '/employee' +', '+ this.value.id +']">' + this.value.name + '</a>';
        },
        useHTML: true
      }
    },