Javascript 使用innerHTML时绑定到外部内容的单击事件

是否可以绑定到来自外部内容的事件。内容通过

innerHTML

我有下面的代码，通过它我可以抓取外部内容并在我的应用程序中显示。我正在尝试侦听

标记的onClick事件。

是一个路由重定向。侦听应该驻留在我的应用程序中，因为我想在路由到新路由之前做一些其他事情

我尝试过设置handleClick函数，但我认为这不是正确的方法

我还认为可能使用

ElementRef

——在本例中是

#view

，但在本例中jquery light会更好吗

@Component({
  selector: 'overview-details',
  template: `
    <h2>{{ title }}</h2>
    <div #view [innerHTML]="regCode | sanitizeHtml"></div>
  `
})

ngOninit() {
    this.regcode = `
        <div>
            <h1>RegCode Content</h1>
            <a class="link" (click)="handleClick()">Link</a>
        </div>
    `;
}

//within controller
handleClick(){
    // do some stuff
    // then route
    router.navigate([somewhere....]);
}

@组件({
选择器：“概述详细信息”，
模板：`
{{title}}
`
})
恩戈尼尼特（）{
this.regcode=`
规则代码内容
链接
`;
}
//控制器内
handleClick（）{
//做点什么
//然后路线
路由器。导航（[某处…）；
}

Angular不处理添加了

[innerHTML]=“…”

或任何其他方式的HTML。像

（单击）=“…”

这样的绑定在静态添加到组件模板时只起作用

你可以用

constructor(private elRef:ElementRef) {}

ngAfterViewInit() {
  this.elRef.nativeElement.querySelector('a.link').addEventListener('click', this.handleClick.bind(this));
}

---

Angular不处理添加了

[innerHTML]=“…”

或任何其他方式的HTML。像

（单击）=“…”

这样的绑定在静态添加到组件模板时只起作用

你可以用

constructor(private elRef:ElementRef) {}

ngAfterViewInit() {
  this.elRef.nativeElement.querySelector('a.link').addEventListener('click', this.handleClick.bind(this));
}

---

我最终得出了以下结论

我将

（单击）

添加到

div

中，还将

数据路由添加到
中，并可以使用
事件.target.dataset.route
获取值

以防万一其他人也有类似的问题

@Component({
  selector: 'overview-details',
  template: `
   <h2>{{ title }}</h2>
   <div (click)="handleClick($event)" [innerHTML]="regCode | sanitizeHtml"></div>
   `
})

ngOninit() {
   this.regcode = `
      <div>
          <h1>RegCode Content</h1>
          <a class="link" data-route="0">Link</a>
      </div>
  `;
}

handleClick(event: any) {
    console.log('fire', event.target.dataset.route);
    if (event.target.dataset.route == 0) {
       router.navigate([somewhere....]);
    } esle {
       router.navigate([somewhereElse....]);
    }
}

@组件({
选择器：“概述详细信息”，
模板：`
{{title}}
`
})
恩戈尼尼特（）{
this.regcode=`
规则代码内容
链接
`;
}
handleClick（事件：任意）{
日志（'fire'，event.target.dataset.route）；
if（event.target.dataset.route==0）{
路由器。导航（[某处…）；
}埃斯勒{
路由器。导航（[其他地方]）；
}
}
我最终得出了以下结论

我将
（单击）
添加到
div
中，还将
数据路由添加到
中，并可以使用
事件.target.dataset.route
获取值

以防万一其他人也有类似的问题

@Component({
  selector: 'overview-details',
  template: `
   <h2>{{ title }}</h2>
   <div (click)="handleClick($event)" [innerHTML]="regCode | sanitizeHtml"></div>
   `
})

ngOninit() {
   this.regcode = `
      <div>
          <h1>RegCode Content</h1>
          <a class="link" data-route="0">Link</a>
      </div>
  `;
}

handleClick(event: any) {
    console.log('fire', event.target.dataset.route);
    if (event.target.dataset.route == 0) {
       router.navigate([somewhere....]);
    } esle {
       router.navigate([somewhereElse....]);
    }
}

@组件({
选择器：“概述详细信息”，
模板：`
{{title}}
`
})
恩戈尼尼特（）{
this.regcode=`
规则代码内容
链接
`;
}
handleClick（事件：任意）{
日志（'fire'，event.target.dataset.route）；
if（event.target.dataset.route==0）{
路由器。导航（[某处…）；
}埃斯勒{
路由器。导航（[其他地方]）；
}
}