Question

我想使用[innerHtml]链接到其他离子页面。

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

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

我知道这不会起作用，因为安全。但是我怎么能用离子和角4生成动态代码？

你能告诉我一个例子我有哪些选择吗？

这是一个hacky应用程序，我使用谷歌工作表作为后端。

Answer 1

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

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

如果代码被过度化并且Angular清除了您想要保留的某个部分，那么您必须明确地将其标记为“可能不安全”，让Angular知道您已意识到潜在的风险。使用DomSanitizer类＆＃39; bypassSecurityTrust *（）方法。

// component.ts
constructor(private sanitizer: DomSanitizer) {
}

public getHtmlWithBypassedSecurity(code: string): SafeHtml {
    return this.sanitizer.bypassSecurityTrustHtml(code);
}    

// component.html
<div [innerHTML]="getHtmlWithBypassedSecurity(someHtmlCode)"></div>

Answer 2

如果其他人遇到相同的问题

您可以使用[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
        });
      }
    }
  }

然后最后要允许数据ID，可以使用bypassSecurityTrustHtml制作管道，也可以像Ondra答案那样使用它。

使用离子将单击函数绑定到innerhtml

2 个答案: