如何使用组件将动态HTML加载到DIV中？ Angular5 [英] How to load dynamic HTML into DIV with component? Angular5

问题描述

我一直试图在两天内找到解决这个问题的方法。不幸的是，我无法得到我想要的东西。我正在使用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包含一个名为<的包a href =https://www.npmjs.com/package/ng2-select2 =noreferrer> Select2
这是我用来添加的html到这个div它工作得很好。直到我想添加动态包。

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

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

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

我想要的是要转换成组件的字符串或任何其他有效的方式并生成select2下拉列表。

I一直试图搜索这么多东西。但它不起作用
这很好但我无法理解这一点并且不推荐使用dynamiccomponentloading。

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

解决方案

由@Devcon评论

< blockquote>

Angular将清理几乎所有的东西，这就是为什么你是
获取纯文本的原因。你想要研究的是ReflectiveInjector
，主要是ComponentFactoryResolver。主要的想法是组件
需要渲染一些其他信息（服务，其他组件等），
所以你使用Injector获取依赖注入refs然后
组件工厂构建你的零件。然后将其插入
ViewChild引用。有一种更复杂的动态
方法，使得使用编译器的组件需要一个
的ModuleWithComponentFactories，这就是实际使用的角度。

在角度上搜索，我接受角度不应该这样做。

因为我必须创建一个必须完全动态的页面用html渲染。我改变了我的json并使用
ng-container 和 ng-template 并使用 ngswitch
我在自己的模板中进行了递归调用，发现它工作正常。

<使用它我有很多优点：$ b​​ $ b 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> 
  

I have been trying to find the solution of this problem from two days. Unfortunately, I can not get what I want. I am using Angular5.

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

This is what my function looks like:

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

Everything works fine, unless The html which I am returning contains one package named Select2 This is what I use to add the html into this div it works very fine. Until I wanted to add the dynamic package.

What I mean is return html contains the package component like this:

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

This just returns the plain text to the browser and doesn't work as expected.

What I want is the string to be turned into component or any other way which works and generates the select2 dropdown.

I have been trying to search so many things.But it doesn't works This is good but I can not understand this And dynamiccomponentloading is deprecated.

Can anyone please give me an idea How can I resolve this problem? Any example would be a great.

解决方案

As commented by @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.

And searching on the angular, I accept that angular should not be done this way.

As I have to create the fully dynamic page which must be rendered in html. I changed my json little bit and using the ng-container and ng-template and using ngswitch I made recursive call in the template it self and found its working very fine.

I get many advantages using this: The HTML (I render dynamically) itself is in HTML, Code is clean and readable, easily maitainable.

The example given here is pretty much the same I have done. https://stackoverflow.com/a/40530244/2630817

A small example is here:

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

这篇关于如何使用组件将动态HTML加载到DIV中？ Angular5的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！