如何使用 Angular 2 组件动态添加 innerHTML

Posted 2023-05-07

【中文标题】如何使用 Angular 2 组件动态添加 innerHTML

【英文标题】：How to dynamically add innerHTML with angular 2 components

【发布时间】：2017-03-21 07:29:09

【问题描述】：

我正在为组件库创建文档。我想要 1 个 html 字符串来生成页面上的组件和它的文档。

我想要什么：

我有什么：

当我检查 HTML 时，我的按钮标签不存在。当我使用 innerHTML 时，它们会被删除。

我的组件代码：

private flatButtons = `<div class="button-wrapper">
      <my-button [type]="'default'" [raised]="false">Default</my-button>
    </div>
    <div class="button-wrapper">
      <my-button [type]="'primary'" [raised]="false">Primary</my-button>
    </div>
    <div class="button-wrapper">
      <my-button [type]="'success'" [raised]="false">Success</my-button>
    </div>
    <div class="button-wrapper">
      <my-button [type]="'info'" [raised]="false">Info</my-button>
    </div>
    <div class="button-wrapper">
      <my-button [type]="'warning'" [raised]="false">Warning</my-button>
    </div>
    <div class="button-wrapper">
      <my-button [type]="'danger'" [raised]="false">Danger</my-button>
    </div>`

constructor() 

getCode() 
    return html_beautify(this.flatButtons, this.options)

我的 HTML 模板：

<div class="row">
<div class="col-sm-6 col-xs-12">
  <mi-card title="Flat Buttons" baCardClass="with-scroll button-panel">
    <div id="flatButtons" [innerHTML]="getCode()">
    </div>
  </mi-card>
</div>
<div class="col-sm-6 col-xs-12">
  <pre>getCode()</pre>
</div>

【问题讨论】：

您希望发生什么？

我期待“我想要什么：”之后的图片

好的，所以你希望添加的 HTML 成为真正的 Angular 组件。这种方式行不通。看我的回答。

这对我有用：***.com/a/43862386/1048800

也许这会有所帮助：github.com/apoterenko/angular2-dynamic-component

【参考方案1】：

Angular 不处理动态添加的 HTML，它只是逐字添加它，除了一些清理以防止安全问题。 请参阅In RC.1 some styles can't be added using binding syntax 以了解如何防止 sanitizer 剥离 HTML。

您可以使用ViewContainerRef.createComponent() 中的Angular 2 dynamic tabs with user-click chosen components 来动态添加组件。

还有一些可用的解决方案如何动态创建组件，如Equivalent of $compile in Angular 2所示

【参考方案2】：

我会接受 Gunter 的回答，因为它回答了我的问题。

对于那些感兴趣的人，我解决问题的方法是创建一个组件并要求它。

我创建了一个哑组件：

import Component from '@angular/core';


@Component(
  selector: 'flat-buttons',
  template: require('./flatButtons.html'),
)
export class FlatButtons 

  constructor() 
  

然后是我修改后的html模板：

<div class="col-sm-6 col-xs-12">
  <mi-card title="Flat Buttons" baCardClass="with-scroll button-panel">
    <flat-buttons></flat-buttons>
  </mi-card>
</div>
<div class="col-sm-6 col-xs-12">
  <h3>Code Snippet</h3>
  <div class="well">
    <pre>getFlatButtons()</pre>
  </div>
</div>

还有我修改过的组件代码：

private flatButtons = require('./components/flatButtons/flatButtons.html')

constructor() 

getFlatButtons() 
    return html_beautify(this.flatButtons, this.options)

【讨论】：

collinglass，你的 flatButtons.html 看起来怎么样？可以分享一下吗？