0

我试图将单击事件传递给使用 DomSanitizer 呈现的按钮。但是单击按钮时不会调用有界方法。

组件.ts

    export class MyComponent {
       htmlElement = '<button class="btn btn-primary" (click)="onClick()">Add</button>';
    
    onClick() {
        console.log('submitted');
      }
    }

组件.html

    <div [innerHtml]="htmlElement | sanitizer"></div>

管道.ts

    import { Pipe, PipeTransform } from '@angular/core';
    import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
    
    @Pipe({
      name: 'sanitizer'
    })
    export class SanitizerPipe implements PipeTransform {
      constructor(private _sanitizer: DomSanitizer) {}
        transform(v: string): SafeHtml {
          return this._sanitizer.bypassSecurityTrustHtml(v);
        }
    }

按钮以样式正确显示。但是点击事件没有被触发。

是否有任何解决方案或替代解决方案？

4

1 回答 1

1

这是因为 (click)="onClick() 是有角度的，而不是“普通”HTML。当您将它与 innerhtml 绑定一起使用时，角度不会转换为普通 HTML，而是保持原样，并且 dom 不理解它.

在我们的项目中，我们尝试做类似的事情，但还没有找到一个可以使用 angular html 的解决方案。最终我们决定采用一种完全不同的方法，这样我们就不必使用 innerhtml 绑定了。如果您可以选择在不注入这样的 html 的情况下解决此问题，那将更安全、更容易。

另请参阅此问题：ngModel，单击 not working in angular 4 in dynamic added html

于 2018-06-04T12:36:19.413 回答