使用 ionic 将点击函数绑定到 innerhtml

Question

我想链接到其他离子页面，[innerHtml] .

例如，我想使用 [innerHtml] 将以下代码传递给应用程序：

<a (click)="goto('10')">Ipsum</a>

我知道这行不通，因为安全性。但是，我还能如何使用离子和角度 4 生成动态代码呢？

你能给我举个例子吗？

这是一个黑客应用程序，我使用谷歌表格作为后端。

Answer 1

如果其他人有同样的问题

您可以使用[innerHTML]运行 Angular 4 GoTo 函数

<a class="next-page" data-id="10">Ipsum</a>

然后拨打attachNextPageListener ngAfterViewInit()

   private attachNextPageListener(){
    const pageElements=document.getElementsByClassName('next-page');
    if(pageElements && pageElements.length){
      for(let i=0; i<pageElements.length; i++){
        const goto=pageElements[i].getAttribute('data-id');
        pageElements[i].addEventListener('click',()=>{
          this.goto(goto);
          // run your angular code here with goto
        });
      }
    }
  }

最后要允许 data-id，您可以使用 bypassSecurityTrustHtml 制作管道或像 Ondra 答案一样使用它。

Answer 2

您可以将字符串绑定到元素的 [innerHtml]。Angular 将清理代码并删除任何潜在的不安全部分。如果这样做，则会在控制台上记录一条消息。

<div [innerHtml]="someHtmlCode"></div>

如果代码被过度清理并且 Angular 清除了您想要保留的某些部分，那么您必须明确将其标记为"潜在不安全"，让 Angular 知道您已意识到潜在风险。使用 DomSanitizer 类的 bypassSecurityTrust*(( 方法。

// component.ts
constructor(private sanitizer: DomSanitizer) {
}
public getHtmlWithBypassedSecurity(code: string): SafeHtml {
    return this.sanitizer.bypassSecurityTrustHtml(code);
}    
// component.html
<div [innerHTML]="getHtmlWithBypassedSecurity(someHtmlCode)"></div>