Ionic3 - 离子元素/组件在 innerHTML 中不起作用

Posted 2023-05-07

【中文标题】Ionic3 - 离子元素/组件在 innerHTML 中不起作用

【英文标题】：Ionic3 - ionic element/component not working in innerHTML

【发布时间】：2019-09-08 09:49:14

【问题描述】：

我正在组件中创建动态 html，但正常的 ionic 样式不起作用。

在 html 中：

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

在组件中

public testHtml = "<button color='secondary' ion-button>Default</button>";

我也尝试使用管道来信任 html，但这只能使用内联样式：

在管道中：

this.sanitizer.bypassSecurityTrustHtml(html);

【问题讨论】：

直接在.html文件中添加代码是否有效？ IE。 <div> <button color='secondary' ion-button>Default</button></div>

ionic 的风格没有影响。显示简单的按钮。

离子按钮不起作用

试试'默认'。

那也不行

【参考方案1】：

这个问题和Ionic button showing 'ion-button' is not a known element一样

由于 ionic 是 angular 之上的框架，因此 angular 无法解析 ionic 自定义元素，也无法对其应用正确的 CSS，因为解析发生在添加 innerHTML 之前。

因此，在这一点上，我建议不要在innerHTML 指令中创建元素。让innerHTML 的使用保持文本格式。

Angular 旨在将 html 元素放入 html 模板（.html 文件或 template: 属性）中。 无论你在做什么，你想在 innerHTML 中创建 html，你可以像这样将它放在 .html 文件中，只需放置一个 [ngIf] 指令来显示或隐藏元素，或者使用 [ngClass] 指令添加一个元素的特定类。

<div>
    <button [ngIf]="someTrueCondition; else showTheOtherElement" color='secondary' ion-button>Default</button>
    <ng-template #showTheotherElement>
        <button  color='primary' ion-button>Default</button>
    </ng-template>
</div>

【讨论】：

不，不一样***.com/questions/51544863/…。这是离子按钮在 ionic3 中不可用，但在 ionic4 中引入

【参考方案2】：

Angular 会清理所有动态添加的 HTML。

解决方案很简单 - 使用管道

从 '@angular/core' 导入 Pipe, PipeTransform ; 从“@angular/platform-b​​rowser”导入 DomSanitizer；

@Pipe(
  name: 'safeHtml',
)
export class SafeHtmlPipe implements PipeTransform 

  constructor(private sanitizer:DomSanitizer)

  transform(html) 
    return this.sanitizer.bypassSecurityTrustHtml(html);
  

并使用 innerHTML 标记并添加您的管道

<div [innerHTML]="question | safeHtml"></div>

在这里工作。

【讨论】：

非常感谢您的出色回答，让我继续下一步。谢谢！