javascript - 如何使用组件将动态 HTML 加载到 DIV 中？ Angular 5

Question

这两天我一直在努力寻找这个问题的解决方案。不幸的是，我得不到我想要的。我正在使用 Angular5。

<div class="form-group col-md-12" [innerHTML]="GetItemsOfHolder(item.children[1],1,
'UserConfigGroupsLabelHolder') | keepHtml"></div>

这是我的函数的样子:

GetItemsOfHolder(item: any,divName:string, recursive: boolean = false,typeName:string="") 
{
return html;
}

一切正常，除非我返回的 html 包含一个名为 Select2 的包这就是我用来将 html 添加到此 div 中的方法，它工作得很好。直到我想添加动态包。

我的意思是返回 html 包含这样的包组件:

itemhtml +="<select2 data-type='"+holderItem.itemType+"' 
[data]='this.dropdownData."+holderItem.name+"'></select2>"  

这只是将纯文本返回给浏览器，并没有按预期工作。

我想要的是将字符串转换为组件或任何其他可以工作并生成 select2 下拉列表的方式。

我一直在尝试搜索很多东西，但它不起作用 This is good but I can not understand this并且动态组件加载已被弃用。

任何人都可以给我一个想法我该如何解决这个问题？任何例子都会很棒。

Answer 1

正如@Devcon 评论的那样

Angular will sanitize pretty much everything so that is why you are getting plain text. What you want to look into is ReflectiveInjector and mainly ComponentFactoryResolver. The main idea is that components need some other info(services, other components, etc) to be rendered, so you use the Injector to get Dependency Injection refs then the Component factory builds your component. You then insert this to a ViewChild reference. There is a more complicated way of dynamically making components that uses the compiler and requires a ModuleWithComponentFactories, this is what angular actually uses.

并且搜索 Angular ，我接受 Angular 不应该这样做。

因为我必须创建必须以 html 呈现的完全动态页面。我稍微改变了我的 json 并使用 ng-container and ng-template并使用 ngswitch我在它自己的模板中进行了递归调用，发现它工作得很好。

我使用它有很多好处:HTML(我动态呈现)本身就是 HTML，代码干净易读，易于维护。

此处给出的示例与我所做的几乎相同。 https://stackoverflow.com/a/40530244/2630817

这里是一个小例子:

<ng-template #itemsList let-itemsList>
  <div *ngFor="let item of itemsList;let i = index">
    <div [ngSwitch]="item.itemType">
        <div class="form-group" *ngSwitchCase="'TEXT'">
            <label>
                {{item.label}}
              </label>
              <input id="{{item.name}}" value="{{item.value}}" type='text' class='form-control txtbox ui-autocomplete-input'/>
        </div>
        <div class="form-group" *ngSwitchCase="'PASSWORD'">
            <label>
                {{item.label}}
              </label>
              <input id="{{item.name}}" value="{{item.value}}" type='password' class='form-control txtbox ui-autocomplete-input'/>
        </div>
        <div class="form-group" *ngSwitchCase="'BOOLEAN'">
            <label style='width:40%'>{{item.label}}</label>
            <div class="form-group"><input id="{{item.name}}" type='checkbox' /></div>

        </div>
        <div  class="form-group" *ngSwitchCase="'LABEL'">
            <label class="form-control">{{item.label}}</label>
        </div>
        <div class="form-group"  *ngSwitchDefault>
            <label>
                {{item.label}}
              </label>
              <select2 class="form-control"  [data]="GetDropDowndata(item.holderId)" [cssImport]="false" [width]="300" [options]="GetOptions(item.type)"></select2>
          </div>
    </div>
  </div>