Angular 角度-如何将单击事件处理程序添加到动态添加的内容_Angular

Angular 角度-如何将单击事件处理程序添加到动态添加的内容

angular

Angular 角度-如何将单击事件处理程序添加到动态添加的内容,angular,Angular,我需要在angular（而不是angular js）中动态填充内容。动态内容将包含链接，我需要找到点击的链接，从点击的链接中提取一些属性值，并将其用于处理。Angular似乎不支持这一点让我展示一下动态消息将包含的内容组件模板片段如下所示 <div [innerHTML]="some_html_content"></div> 一些html内容将包含如下值 some_html_content = 'please make you selection <

我需要在angular（而不是angular js）中动态填充内容。动态内容将包含链接，我需要找到点击的链接，从点击的链接中提取一些属性值，并将其用于处理。Angular似乎不支持这一点

让我展示一下动态消息将包含的内容

组件模板片段如下所示

<div [innerHTML]="some_html_content"></div>

一些html内容将包含如下值

some_html_content =    'please make you selection <a onClik="navigate()" some-prop="somevalue-1">Click Link 1 </a>
    <a onClik="navigate()" some-prop="somevalue-2">Click Link 2 </a>';

some_html_content='请点击链接1进行选择
点击链接2'；

请帮助我找到一个适用于angular的解决方案。

出于安全考虑，angular不处理由

[innerHTML]

添加的HTML。这意味着

innerHTML

内容不会响应事件

使用

*ngFor

尽管

innerHTML

不起作用，但您仍然可以使用

*ngFor

动态插入响应

单击

事件的HTML

示例组件

关于DomSanitizer的脚注（警告：这不起作用。）可以使用Angular

DomSanitizer

通过

innerHTML

添加原始HTML，但是，它不会执行

（单击）

事件处理程序

public html_links: SafeHtml;

public constructor(private router: Router, private sanitizer: DomSanitizer) { }

ngOnInit() {
  // DOES NOT WORK
  const some_html_content = `Please make your selection<br/><a (click)="navigate()">Link 1</a>
      <br/><a (click)="navigate()">Link 2</a>`;
  this.html_links = this.sanitizer.bypassSecurityTrustHtml(some_html_content);
}

public html\u链接：SafeHtml；
公共构造函数（专用路由器：路由器，专用消毒器：DOMSANTIZER）{}
恩戈尼尼特（）{
//不起作用
const some_html_content=`请选择链接1

链接2`；
this.html\u links=this.sanitizer.bypassSecurityTrustHtml（某些内容）；
}

模板

出于安全考虑，Angular不处理

[innerHTML]