Question

在Angular项目中，我使用3rd party message display component向用户显示错误文本。对于某些消息，我希望能够有一个可点击的链接，这将为用户提供更多关于他们可以做些什么来修复错误的上下文。我不希望链接重定向用户，而是更改一个布尔变量，它将显示一个包含更多信息的消息框。

即

//In the component
let callback = ()=>{this.showAdditionalInfoBox = true; }
let detail = `Some message <a href="javascript:void(0)" onclick="${callback}">More Info</a>`;
let safeDetail = this.domSanitizer.bypassSecurityTrustHtml(detail);
this.messageService.add({
     severity:'error', 
     summary:'Something Happened', 
     detail:safeDetail
});

呈现消息后，onclick如下所示：

onclick="function(){ _this.showAdditionalInfoBox = true;}"

点击后，我收到错误信息，说明_this未定义。这告诉我箭头函数的闭包没有附带它，因为_this应该是指向我的组件的指针。

有什么方法可以让箭头功能一直翻译吗？我可以将点击处理程序附加到此动态创建的html元素的任何其他方式吗？

Answer 1

由于您渲染的HTML在角度范围之外并且将像常规JavaScript函数一样运行，因此您需要获取组件类的引用，然后使用它的一些方法，

要实现这一点，请在OnInit生命周期挂钩

中使用全局窗口变量注册组件类

ngOnInit(){
     window.myapp = this;
}

然后您可以简单地使用任何组件函数，如下所示，

 ...
 window.myapp.<function in your component>
 ...

因此，您可以更新详细消息，如下所示

onClick() {
     let callback = "window.myapp.superHack(); return false;";
     let detail = `Some message <a href="javascript:void(0)" onclick="${callback}">More Info</a>`;
     let safeDetail = this.domSanitizer.bypassSecurityTrustHtml(detail);
     this.messageService.add({
       severity:'error', 
       summary:'Something Happened', 
       detail:safeDetail
     });
}

现在由于函数是在angular之外使用的，所以你需要利用NgZone来改变模型变换fireDetection。

superHack = () => {
    this.zone.run(() => {
      this.someVar = "new value";
    });
}

不要忘记从全局引用中销毁对象。

ngOnDestroy(){
   delete  window.myapp;
}

以下是Plunker !!

中的完整示例

希望这有帮助!!

在文本中传递打字稿箭头功能（Angular）

1 个答案: