Ionic 3中如何在动态加载的HTML中渲染Ionic组件？

这个问题我之前也碰到过，核心原因很简单：Angular（包括Ionic的组件）不会对[innerHTML]插入的内容进行组件编译。ion-button本质是Angular的指令/组件，当你用innerHTML把HTML插进去时，Angular只会把它当作普通的原生HTML处理，不会识别ion-button这个指令，自然也就不会应用Ionic的样式和组件逻辑。

下面给你两种可行的解决方案，按需选择：

方案1：手动添加Ionic按钮的CSS类（快速临时解决） #

Ionic的ion-button最终会被渲染成带有一系列特定CSS类的原生button标签，比如针对Material Design平台的类是button button-md button-default button-default-md，iOS平台是button button-ios button-default button-default-ios。你可以直接在动态HTML里加上这些类，让按钮看起来和Ionic按钮一样：

// 适配MD平台的例子，根据你的目标平台调整类名
testHtml = `<h1>Testpage</h1><button class="button button-md button-default button-default-md">This should look like a button</button>`;

然后模板里用属性绑定的[innerHTML]（注意你原来的写法少了方括号，应该是属性绑定）：

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

⚠️ 缺点：需要针对不同平台（MD/iOS/WP）写不同的类，而且无法获得ion-button的交互逻辑（比如点击反馈），适合简单的静态样式需求。

方案2：用Angular动态组件编译（正规解决方案） #

如果需要完整的ion-button功能（样式+交互），就得让Angular编译动态内容里的组件。我们可以通过ComponentFactoryResolver在运行时动态创建一个组件，把动态HTML作为它的模板，这样Angular就会正常编译其中的Ionic组件。

具体代码如下：

1. 修改你的组件代码 #

import { Component, ViewChild, ViewContainerRef, ComponentFactoryResolver, OnInit } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Component({
  selector: 'your-component-selector',
  template: `
    <!-- 用这个容器来挂载动态组件 -->
    <div #dynamicContentHost></div>
  `
})
export class YourComponent implements OnInit {
  // 获取挂载动态组件的容器
  @ViewChild('dynamicContentHost', { read: ViewContainerRef }) dynamicHost: ViewContainerRef;
  testHtml = `<h1>Testpage</h1><button ion-button>This should look like a button</button>`;

  constructor(
    private componentFactoryResolver: ComponentFactoryResolver,
    private sanitizer: DomSanitizer
  ) {}

  ngOnInit() {
    this.renderDynamicContent();
  }

  private renderDynamicContent() {
    // 清空容器（避免重复渲染）
    this.dynamicHost.clear();

    // 创建一个临时的动态组件，模板是我们的testHtml
    const dynamicComponent = Component({
      template: this.sanitizer.bypassSecurityTrustHtml(this.testHtml) as string
    })(class {});

    // 获取组件工厂并创建组件
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(dynamicComponent);
    this.dynamicHost.createComponent(componentFactory);
  }
}

2. 原理说明 #

通过Component()方法动态定义一个组件，把我们的动态HTML作为它的模板，然后用ComponentFactoryResolver创建这个组件并挂载到指定的容器中。这样Angular会像编译普通组件一样编译这个动态组件，ion-button指令会被正常识别，渲染出带样式和交互的Ionic按钮。

这个方法适用于任何包含Angular/Ionic组件的动态内容，扩展性更强。

内容的提问来源于stack exchange，提问作者Publicus