如何使用组件将动态HTML加载到DIV中？Angular5

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中它非常好用.直到我想添加动态包.

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

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

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

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

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

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

Answer 1

由@Devcon评论

Angular会对几乎所有东西进行消毒,这就是为什么你要获得纯文本的原因.你想要研究的是ReflectiveInjector,主要是ComponentFactoryResolver.主要思想是组件需要呈现一些其他信息(服务,其他组件等),因此您使用Injector获取依赖注入引用,然后组件工厂构建您的组件.然后将其插入ViewChild引用.有一种更复杂的方法可以动态制作使用编译器的组件,并且需要一个ModuleWithComponentFactories,这就是angular实际使用的.

在角度上搜索,我接受角度不应该这样做.

因为我必须创建必须在html中呈现的完全动态页面.我改变了我的json一点,并使用 ng-container和ng-template并使用ngswitch 我在模板中进行了递归调用,并发现它的工作非常好.

我使用它获得了很多好处:HTML(我动态渲染)本身是HTML格式,代码清晰可读,易于维护.

这里给出的例子与我所做的完全一样. /sf/answers/2837117111/

这里有一个小例子:

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

Answer 2

您可以在一个 div 中加载您想要的所有内容，您必须使用 ng-template 和 ng-content。

首先，您必须创建一个指令：

import {Directive, ViewContainerRef} from '@angular/core';

@Directive({
  selector: '[dynamic]',
  exportAs: 'dynamicdirective'
})
export class DynamicDirective {

  constructor(public viewContainerRef: ViewContainerRef) { }

}

在您必须将其放入一些 ng-template 之后，例如：

<p>
  page works!
</p>


<ng-template #sider=dynamicdirective dynamic></ng-template>

并像使用它一样

import {Component, ComponentFactoryResolver, OnInit, ViewChild} from '@angular/core';


@Component({
  selector: 'app-page',
  templateUrl: './page.component.html',
  styleUrls: ['./page.component.css']
})
export class PageComponent implements OnInit {

  @ViewChild('sider')
  sider;

  constructor(private componentFactoryResolver: ComponentFactoryResolver) {
  }

  ngOnInit() {
    
      const componentFactory = this.componentFactoryResolver.resolveComponentFactory(SomeComponent);
 this.sider.viewContainerRef.createComponent(componentFactory);
    });
   
  }

}

通常会在 ng-template 的位置看到你的组件加载（如果你想重置你的视图，你可以调用https://angular.io/api/core/ViewContainerRef#clear）

我已经玩过这个了，你可以在这里找到一些代码https://github.com/nicearma/dynamic