Как я могу использовать / создать динамический шаблон для компиляции динамического компонента с Angular 2.0?

EDIT (26/08/2017). Решение ниже хорошо работает с Angular2 и 4. Я обновил его, чтобы он содержал переменную шаблона и обработчик кликов и протестировал его с помощью Angular 4.3.
Для Angular4, ngComponentOutlet, как описано в Ophir answer, является гораздо лучшим решением. Но сейчас пока не поддерживает входы и выходы. Если [этот PR] (https://github.com/angular/angular/pull/15362] принят, это возможно через экземпляр компонента, возвращенный событием create.
ng-dynamic-component может быть лучшим и самым простым решением, но я еще не тестировал его.

@Полевой ответ на поле! Вот еще один (синхронный) пример:

import {Compiler, Component, NgModule, OnInit, ViewChild,
  ViewContainerRef} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'my-app',
  template: `<h1>Dynamic template:</h1>
             <div #container></div>`
})
export class App implements OnInit {
  @ViewChild('container', { read: ViewContainerRef }) container: ViewContainerRef;

  constructor(private compiler: Compiler) {}

  ngOnInit() {
    this.addComponent(
      `<h4 (click)="increaseCounter()">
        Click to increase: {{counter}}
      `enter code here` </h4>`,
      {
        counter: 1,
        increaseCounter: function () {
          this.counter++;
        }
      }
    );
  }

  private addComponent(template: string, properties?: any = {}) {
    @Component({template})
    class TemplateComponent {}

    @NgModule({declarations: [TemplateComponent]})
    class TemplateModule {}

    const mod = this.compiler.compileModuleAndAllComponentsSync(TemplateModule);
    const factory = mod.componentFactories.find((comp) =>
      comp.componentType === TemplateComponent
    );
    const component = this.container.createComponent(factory);
    Object.assign(component.instance, properties);
    // If properties are changed at a later stage, the change detection
    // may need to be triggered manually:
    // component.changeDetectorRef.detectChanges();
  }
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

Live at http://plnkr.co/edit/fdP9Oc.

Я, должно быть, приехал на вечеринку поздно, ни одно из решений здесь не показалось мне полезным - слишком беспорядочно и было похоже на слишком много обходного пути.

То, что я закончил, это использовать Angular 4.0.0-beta.6 ngComponentOutlet.

Это дало мне самое кратчайшее, самое простое решение, написанное в файле динамических компонентов.

• Вот простой пример, который просто получает текст и помещает его в шаблон, но, очевидно, вы можете изменить в соответствии с вашими потребностями:

import {
  Component, OnInit, Input, NgModule, NgModuleFactory, Compiler
} from '@angular/core';

@Component({
  selector: 'my-component',
  template: '<ng-container *ngComponentOutlet="dynamicComponent;
                            ngModuleFactory: dynamicModule;"></ng-container>',
  styleUrls: ['my.component.css']
})
export class MyComponent implements OnInit {
  dynamicComponent;
  dynamicModule: NgModuleFactory<any>;

  @Input()
  text: string;

  constructor(private compiler: Compiler) {
  }

  ngOnInit() {
    this.dynamicComponent = this.createNewComponent(this.text);
    this.dynamicModule = this.compiler.compileModuleSync(this.createComponentModule(this.dynamicComponent));
  }

  protected createComponentModule (componentType: any) {
    @NgModule({
      imports: [],
      declarations: [
        componentType
      ],
      entryComponents: [componentType]
    })
    class RuntimeComponentModule
    {
    }
    // a module for just this Type
    return RuntimeComponentModule;
  }

  protected createNewComponent (text:string) {
    let template = 'dynamically created template with text: ${text}';

    @Component({
      selector: 'dynamic-component',
      template: template
    })
    class DynamicComponent implements OnInit{
       text: any;

       ngOnInit() {
       this.text = text;
       }
    }
    return DynamicComponent;
  }
}

• Краткое объяснение:
  1. my-component - компонент, в котором выполняется динамический компонент
  2. DynamicComponent - компонент, который будет динамически построен, и он выполняет рендеринг внутри моего компонента

Не забудьте обновить все угловые библиотеки до ^ Angular 4.0.0

Надеюсь это поможет. Удачи!

ОБНОВИТЬ

Также работает для углового 5.

Я решил сжать все, что я узнал, в один файл. Там много чего взять, особенно по сравнению с RC5. Обратите внимание, что этот исходный файл содержит AppModule и AppComponent.

import {
  Component, Input, ReflectiveInjector, ViewContainerRef, Compiler, NgModule, ModuleWithComponentFactories,
  OnInit, ViewChild
} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';

@Component({
  selector: 'app-dynamic',
  template: '<h4>Dynamic Components</h4><br>'
})
export class DynamicComponentRenderer implements OnInit {

  factory: ModuleWithComponentFactories<DynamicModule>;

  constructor(private vcRef: ViewContainerRef, private compiler: Compiler) { }

  ngOnInit() {
    if (!this.factory) {
      const dynamicComponents = {
        sayName1: {comp: SayNameComponent, inputs: {name: 'Andrew Wiles'}},
        sayAge1: {comp: SayAgeComponent, inputs: {age: 30}},
        sayName2: {comp: SayNameComponent, inputs: {name: 'Richard Taylor'}},
        sayAge2: {comp: SayAgeComponent, inputs: {age: 25}}};
      this.compiler.compileModuleAndAllComponentsAsync(DynamicModule)
        .then((moduleWithComponentFactories: ModuleWithComponentFactories<DynamicModule>) => {
          this.factory = moduleWithComponentFactories;
          Object.keys(dynamicComponents).forEach(k => {
            this.add(dynamicComponents[k]);
          })
        });
    }
  }

  addNewName(value: string) {
    this.add({comp: SayNameComponent, inputs: {name: value}})
  }

  addNewAge(value: number) {
    this.add({comp: SayAgeComponent, inputs: {age: value}})
  }

  add(comp: any) {
    const compFactory = this.factory.componentFactories.find(x => x.componentType === comp.comp);
    // If we don't want to hold a reference to the component type, we can also say: const compFactory = this.factory.componentFactories.find(x => x.selector === 'my-component-selector');
    const injector = ReflectiveInjector.fromResolvedProviders([], this.vcRef.parentInjector);
    const cmpRef = this.vcRef.createComponent(compFactory, this.vcRef.length, injector, []);
    Object.keys(comp.inputs).forEach(i => cmpRef.instance[i] = comp.inputs[i]);
  }
}

@Component({
  selector: 'app-age',
  template: '<div>My age is {{age}}!</div>'
})
class SayAgeComponent {
  @Input() public age: number;
};

@Component({
  selector: 'app-name',
  template: '<div>My name is {{name}}!</div>'
})
class SayNameComponent {
  @Input() public name: string;
};

@NgModule({
  imports: [BrowserModule],
  declarations: [SayAgeComponent, SayNameComponent]
})
class DynamicModule {}

@Component({
  selector: 'app-root',
  template: '
        <h3>{{message}}</h3>
        <app-dynamic #ad></app-dynamic>
        <br>
        <input #name type="text" placeholder="name">
        <button (click)="ad.addNewName(name.value)">Add Name</button>
        <br>
        <input #age type="number" placeholder="age">
        <button (click)="ad.addNewAge(age.value)">Add Age</button>
    ',
})
export class AppComponent {
  message = 'this is app component';
  @ViewChild(DynamicComponentRenderer) dcr;

}

@NgModule({
  imports: [BrowserModule],
  declarations: [AppComponent, DynamicComponentRenderer],
  bootstrap: [AppComponent]
})
export class AppModule {}'

У меня есть простой пример, чтобы показать, как сделать динамический компонент angular 2 rc6.

Скажем, у вас есть динамический шаблон html = template1 и вы хотите динамическую загрузку, сначала вставьте в компонент

@Component({template: template1})
class DynamicComponent {}

здесь template1 как html, может содержать компонент ng2

Из rc6 необходимо, чтобы @NgModule обертывал этот компонент. @NgModule, как и модуль в anglarJS 1, он отделяет разную часть приложения ng2, поэтому:

@Component({
  template: template1,

})
class DynamicComponent {

}
@NgModule({
  imports: [BrowserModule,RouterModule],
  declarations: [DynamicComponent]
})
class DynamicModule { }

(Здесь import RouterModule, так как в моем примере в моем html есть некоторые компоненты маршрута, как вы можете видеть позже)

Теперь вы можете скомпилировать DynamicModule как:   this.compiler.compileModuleAndAllComponentsAsync(DynamicModule).then( factory => factory.componentFactories.find(x => x.componentType === DynamicComponent))

И мы должны поставить выше в app.moudule.ts, чтобы загрузить его, см. мой app.moudle.ts. Для получения дополнительной и полной информации проверьте: https://github.com/Longfld/DynamicalRouter/blob/master/app/MyRouterLink.ts и app.moudle.ts

и см. демонстрацию: http://plnkr.co/edit/1fdAYP5PAbiHdJfTKgWo?p=preview

Решено это в Angular 2 Final, просто с помощью директивы dynamicComponent из ng-dynamic.

Использование:

<div *dynamicComponent="template; context: {text: text};"></div>

Где шаблон - это ваш динамический шаблон, а контекст может быть установлен для любой динамической модели данных, с которой вы хотите связать свой шаблон.

Следя за отличным ответом Radmin, требуется небольшая настройка для всех, кто использует angular -cli версии 1.0.0-beta.22 и выше.

COMPILER_PROVIDERS больше нельзя импортировать (подробности см. angular -cli GitHub).

Итак, обходной путь состоит в том, чтобы не использовать COMPILER_PROVIDERS и JitCompiler в разделе providers вообще, но вместо этого используйте JitCompilerFactory from '@angular/compiler', как это происходит внутри класса построителя типов:

private compiler: Compiler = new JitCompilerFactory([{useDebug: false, useJit: true}]).createCompiler();

Как вы можете видеть, он не инъектируется и, следовательно, не имеет зависимостей с DI. Это решение также должно работать для проектов, не использующих angular -cli.

Я хочу добавить несколько деталей поверх этой очень хорошей публикации Radim.

Я принял это решение и немного поработал над ним и быстро столкнулся с некоторыми ограничениями. Я просто опишу их, а затем даю решение этому.

• Прежде всего мне не удалось выполнить динамическую детализацию внутри dynamic-detail (в основном динамические интерфейсы гнезд внутри друг друга).
• Следующая проблема заключалась в том, что я хотел визуализировать динамическую деталь внутри одна из частей, которые были доступны в решении. Что было невозможно с начальным решением.
• Наконец, невозможно использовать шаблонные URL-адреса для динамических частей, таких как строковый редактор.

Я задал еще один вопрос, основанный на этом сообщении, о том, как достичь этих ограничений, которые можно найти здесь:

рекурсивная динамическая компоновка шаблонов в angular2

Я просто изложил ответы на эти ограничения, если вы столкнулись с той же проблемой, что и я, поскольку это делает решение более гибким. Было бы замечательно, если бы начальный плункер также был обновлен с этим.

Чтобы включить динамическую детализацию внутри друг друга, вам нужно добавить DynamicModule.forRoot() в инструкции import в type.builder.ts

protected createComponentModule (componentType: any) {
    @NgModule({
    imports: [
        PartsModule, 
        DynamicModule.forRoot() //this line here
    ],
    declarations: [
        componentType
    ],
    })
    class RuntimeComponentModule
    {
    }
    // a module for just this Type
    return RuntimeComponentModule;
}

Кроме того, было невозможно использовать <dynamic-detail> внутри одной из частей, являющейся строковым редактором или текстовым редактором.

Чтобы включить это, вам нужно будет изменить parts.module.ts и dynamic.module.ts

Внутри parts.module.ts Вам нужно добавить DynamicDetail в DYNAMIC_DIRECTIVES

export const DYNAMIC_DIRECTIVES = [
   forwardRef(() => StringEditor),
   forwardRef(() => TextEditor),
   DynamicDetail
];

Также в dynamic.module.ts вам придется удалить dynamicDetail, поскольку они теперь являются частью частей

@NgModule({
   imports:      [ PartsModule ],
   exports:      [ PartsModule],
})

Работая модифицированный плункер можно найти здесь: http://plnkr.co/edit/UYnQHF?p=preview (я не решил эту проблему, я просто посланник:-D)

Наконец, было невозможно использовать шаблоны в частях, созданных на динамических компонентах. Решение (или обходной путь. Im не уверен, что его ошибка angular или неправильное использование фреймворка) заключалась в создании компилятора в конструкторе вместо его инъекции.

    private _compiler;

    constructor(protected compiler: RuntimeCompiler) {
        const compilerFactory : CompilerFactory =
        platformBrowserDynamic().injector.get(CompilerFactory);
        this._compiler = compilerFactory.createCompiler([]);
    }

Затем используйте _compiler для компиляции, затем также активируются шаблоны.

return new Promise((resolve) => {
        this._compiler
            .compileModuleAndAllComponentsAsync(module)
            .then((moduleWithFactories) =>
            {
                let _ = window["_"];
                factory = _.find(moduleWithFactories.componentFactories, { componentType: type });

                this._cacheOfFactories[template] = factory;

                resolve(factory);
            });
    });

Надеюсь, это поможет кому-то еще!

С уважением Morten

В Angular 7.x я использовал Angular-элементы для этого.

1. Установите @angular-elements npm я @angular/elements -s

2. Создать вспомогательный сервис.

import { Injectable, Injector } from '@angular/core';
import { createCustomElement } from '@angular/elements';
import { IStringAnyMap } from 'src/app/core/models';
import { AppUserIconComponent } from 'src/app/shared';

const COMPONENTS = {
  'user-icon': AppUserIconComponent
};

@Injectable({
  providedIn: 'root'
})
export class DynamicComponentsService {
  constructor(private injector: Injector) {

  }

  public register(): void {
    Object.entries(COMPONENTS).forEach(([key, component]: [string, any]) => {
      const CustomElement = createCustomElement(component, { injector: this.injector });
      customElements.define(key, CustomElement);
    });
  }

  public create(tagName: string, data: IStringAnyMap = {}): HTMLElement {
    const customEl = document.createElement(tagName);

    Object.entries(data).forEach(([key, value]: [string, any]) => {
      customEl[key] = value;
    });

    return customEl;
  }
}

Обратите внимание, что ваш пользовательский тег элемента должен отличаться от углового селектора компонента. в AppUserIconComponent:

...
selector: app-user-icon
...

и в этом случае имя пользовательского тега я использовал "user-icon".

3. Тогда вы должны позвонить зарегистрироваться в AppComponent:

@Component({
  selector: 'app-root',
  template: '<router-outlet></router-outlet>'
})
export class AppComponent {
  constructor(   
    dynamicComponents: DynamicComponentsService,
  ) {
    dynamicComponents.register();
  }

}

4. И теперь в любом месте вашего кода вы можете использовать его так:

dynamicComponents.create('user-icon', {user:{...}});

или вот так:

const html = '<div class="wrapper"><user-icon class="user-icon" user='${JSON.stringify(rec.user)}'></user-icon></div>';

this.content = this.domSanitizer.bypassSecurityTrustHtml(html);

(в шаблоне):

<div class="comment-item d-flex" [innerHTML]="content"></div>

Обратите внимание, что во втором случае вы должны передать объекты с помощью JSON.stringify и после этого снова проанализировать его. Я не могу найти лучшего решения.

Я сам пытаюсь понять, как я могу обновить RC4 до RC5, и поэтому я наткнулся на эту запись, и новый подход к созданию динамических компонентов по-прежнему остается для меня загадкой, поэтому я не предлагаю ничего на компоненте factory resolver.

Но я могу предложить немного более четкий подход к созданию компонентов в этом сценарии - просто используйте переключатель в шаблоне, который будет создавать редактор строк или текстовый редактор в соответствии с некоторым условием, например:

<form [ngSwitch]="useTextarea">
    <string-editor *ngSwitchCase="false" propertyName="'code'" 
                 [entity]="entity"></string-editor>
    <text-editor *ngSwitchCase="true" propertyName="'code'" 
                 [entity]="entity"></text-editor>
</form>

И, между прочим, "[" в [prop] выражении имеет значение, это указывает на одностороннее связывание данных, поэтому вы можете и даже должны опустить их в случае, если вы знаете, что вам не нужно связывать свойство с переменной.

2019 февраль ответ

Отличные новости! Похоже, что пакет @angular/cdk теперь имеет первоклассную поддержку порталов !

1) Добавить те компоненты, которые вы хотите, чтобы динамически добавлять в entryComponents массив вашего AppModule.

2)... и в вашем компоненте:

import { Component, OnInit } from '@angular/core';
import { ComponentPortal } from '@angular/cdk/portal';

@Component({
  selector: 'my-app',
  template: '
    <h3>Portal Example</h3>
    <button (click)="onClickAddChild()">Click to add component dynamically</button>
    <ng-template [cdkPortalOutlet]="myPortal"></ng-template>
  '
})
export class AppComponent  {
  myPortal;
  onClickAddChild() {
    this.myPortal = new ComponentPortal(ChildComponent);
  }
}


@Component({
  selector: 'my-child',
  template: '<p>I am a dynamic component!</p>'
})
export class ChildComponent  {
}

Stackblitz

Это пример динамических элементов управления формы, сгенерированных с сервера.

https://stackblitz.com/edit/angular-t3mmg6

Этот пример динамических элементов управления Form находится в компоненте add (здесь вы можете получить Formcontrols с сервера). Если вы видите метод addcomponent, вы можете увидеть элементы управления Forms. В этом примере я не использую угловой материал, но он работает (я использую @work). Это цель для угловых 6, но работает во всех предыдущих версиях.

Нужно добавить JITComplierFactory для AngularVersion 5 и выше.

Спасибо

Виджай

Основываясь на ответе Ophir Stern, вот вариант, который работает с AoT в Angular 4. Единственная проблема, с которой я сталкиваюсь, это то, что я не могу вводить какие-либо сервисы в DynamicComponent, но я могу жить с этим.

Примечание. Я не тестировал с помощью Angular 5.

import { Component, OnInit, Input, NgModule, NgModuleFactory, Compiler, EventEmitter, Output } from '@angular/core';
import { JitCompilerFactory } from '@angular/compiler';

export function createJitCompiler() {
  return new JitCompilerFactory([{
    useDebug: false,
    useJit: true
  }]).createCompiler();
}

type Bindings = {
  [key: string]: any;
};

@Component({
  selector: 'app-compile',
  template: '
    <div *ngIf="dynamicComponent && dynamicModule">
      <ng-container *ngComponentOutlet="dynamicComponent; ngModuleFactory: dynamicModule;">
      </ng-container>
    </div>
  ',
  styleUrls: ['./compile.component.scss'],
  providers: [{provide: Compiler, useFactory: createJitCompiler}]
})
export class CompileComponent implements OnInit {

  public dynamicComponent: any;
  public dynamicModule: NgModuleFactory<any>;

  @Input()
  public bindings: Bindings = {};
  @Input()
  public template: string = '';

  constructor(private compiler: Compiler) { }

  public ngOnInit() {

    try {
      this.loadDynamicContent();
    } catch (err) {
      console.log('Error during template parsing: ', err);
    }

  }

  private loadDynamicContent(): void {

    this.dynamicComponent = this.createNewComponent(this.template, this.bindings);
    this.dynamicModule = this.compiler.compileModuleSync(this.createComponentModule(this.dynamicComponent));

  }

  private createComponentModule(componentType: any): any {

    const runtimeComponentModule = NgModule({
      imports: [],
      declarations: [
        componentType
      ],
      entryComponents: [componentType]
    })(class RuntimeComponentModule { });

    return runtimeComponentModule;

  }

  private createNewComponent(template: string, bindings: Bindings): any {

    const dynamicComponent = Component({
      selector: 'app-dynamic-component',
      template: template
    })(class DynamicComponent implements OnInit {

      public bindings: Bindings;

      constructor() { }

      public ngOnInit() {
        this.bindings = bindings;
      }

    });

    return dynamicComponent;

  }

}

Надеюсь это поможет.

Ура!