Angular 2 как задать template динамически?

Question

[Coder321]

У меня есть компонент, я хочу задавать ему совершенно разные темплейти в зависимости от переданых ему параметров, как такое сделать?

Comments

[Алексей Зуев]

Можете показать пример чего хотите добиться?

[Coder321]

MaxKorz: вы правы, что то вроде этого

Answer 1

[Алексей Зуев]

Посмотрите вот этот ответ Как в Angular2 инициализировать router?
Там немного устаревший код

Обновленная версия

1) Использование компилятора

Создаем директиву, которая будет динамически подгружать компонент с желаемым шаблоном
html-outler.ts

@Directive({ selector: 'html-outlet' })
export class HtmlOutlet {
  @Input() html: string;
  cmpRef: ComponentRef<any>;

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

  ngOnChanges() {
    const html = this.html;
    if (!html) return;
    
    if(this.cmpRef) {
      this.cmpRef.destroy();
    }
    
    @Component({
      selector: 'dynamic-comp',
      template: html
    })
    class DynamicHtmlComponent  {};

     @NgModule({
      imports: [CommonModule],
      declarations: [DynamicHtmlComponent]
    })
    class DynamicHtmlModule {}

    this.compiler.compileModuleAndAllComponentsAsync(DynamicHtmlModule)
      .then(factory => {
        const moduleRef = factory.ngModuleFactory.create(this.vcRef.parentInjector);
        
        const compFactory = factory.componentFactories.find(x => x.componentType === DynamicHtmlComponent);
        const cmpRef = this.vcRef.createComponent(compFactory, 0, moduleRef.injector);
      });
  }
  
  ngOnDestroy() {
    if(this.cmpRef) {
      this.cmpRef.destroy();
    }    
  }
}

Затем используем это таким образом:

<html-outlet [html]="html"></html-outlet>

Вместо template может быть templateUrl Параметры @Input@Output можно накрутить потом если надо

Пример как это работает

2) Если у вас есть строго определенный набор компонентов, то можете рассмотреть другой вариант:

ComponentFactoryResolver.resolveComponentFactory

В этом случае эти компоненты нужно добавить:

1. в entryComponents массив вашего модуля или компонента
   
2. или через ANALYZE_FOR_ENTRY_COMPONENTS провайдер