Как загрузить динамический HTML в DIV с компонентом? 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, который я возвращаю, содержит один пакет с именем Select2 Это то, что я использую для добавления html в этот div, он работает очень хорошо. Пока я не захочу добавить динамический пакет.

Я имею в виду, что return html содержит компонент пакета следующим образом:

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

Это просто возвращает обычный текст в браузер и не работает должным образом.

Я хочу, чтобы строка была преобразована в компонент или любой другой способ, который работает и генерирует выпадающее меню select2.

Я пытаюсь найти так много вещей. Но это не работает Это хорошо, но я не могу этого понять. Динамическая компоновка устарела.

Может кто-нибудь, пожалуйста, дайте мне идею Как я могу решить эту проблему? Любой пример будет отличным.

Ответ 1

Как прокомментировал @Devcon

Angular будет санировать почти все, поэтому вы получение простого текста. То, что вы хотите посмотреть, это ReflectiveInjector и главным образом ComponentFactoryResolver. Основная идея заключается в том, что компоненты требуется какая-то другая информация (услуги, другие компоненты и т.д.), которые будут отображаться, поэтому вы используете Инжектор, чтобы получить Refendency Injection refs, тогда Компонент factory создает ваш компонент. Затем вы вставляете это в Ссылка ViewChild. Существует более сложный способ динамического которые используют компилятор и требуют ModuleWithComponentFactories, это то, что действительно использует angular.

И при поиске на angular я принимаю, что angular не следует делать таким образом.

Как я должен создать полностью динамическую страницу, которая должна отображаться в html. Я немного изменил свой json и использовал ng-container и ng-template и используя ngswitch Я сделал рекурсивный вызов в шаблоне и сам нашел его работу очень хорошо.

Я получаю много преимуществ, используя это: HTML (я визуализирую динамически) сам по себе в HTML, код чист и читабель, легко maitainable.

Приведенный здесь пример почти такой же, как я сделал. fooobar.com/questions/78818/...

Небольшой пример:

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

Ответ 2

Вы можете загружать все, что хотите, в один div, вам нужно играть с ng-template и ng-content.

Сначала вам нужно создать одну директиву:

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

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

  constructor(public viewContainerRef: ViewContainerRef) { }

}