Question

我正在组件中创建动态HTML，但是常规的离子样式不起作用。

在html中：

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

在组件中（ts）

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

我也尝试使用管道信任html，但这仅使内联样式有效：

在管道中：

this.sanitizer.bypassSecurityTrustHtml(html);

Answer 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>

Answer 2

Angular清除了所有动态添加的HTML。

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

从'@ angular / core'导入{Pipe，PipeTransform}; 从“ @ angular / platform-browser”导入{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>

在这里工作。

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

2 个答案: