Как реализовать динамический рендеринг view?

Question

[Сергей]

Подскажите как скомпилировать это:

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

@Component({
  selector: 'app-root',
  template: '{{comp}}',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  public  title = 'app';

  public comp = '<h1>Скомпилируй</h1> <app-serv-comp></app-serv-comp>';

  constructor(
  ){}

  ngOnInit(){
  }
}

Answer 1

[Сергей]

Нашел схожий вопрос с реализацией директивы Angular 2 как задать template динамически?
Так же есть пакет для ангуляр 5

Answer 2

[Дмитрий Лузанов]

Например так:

import {
	Component,
	ViewChild,
	ViewContainerRef,
	OnInit,
	ComponentFactoryResolver,
	Injector,
	EmbeddedViewRef,
	ElementRef
} from '@angular/core'
import { Type } from '@angular/core'

@Component({
	selector: 'app-root',
	template: '<h1>Скомпилируй</h1> <div #outlet></div>',
	styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
	public title = 'app'
        public AnyComponent

	@ViewChild('outlet') outlet: ElementRef

	constructor(
		private readonly factoryResolver: ComponentFactoryResolver,
		private readonly injector: Injector
	) {}

	public ngOnInit() {
		this.appendComponent(this.AnyComponent)
	}

	public appendComponent<T>(component: Type<T>) {
		const componentRef = this.factoryResolver
			.resolveComponentFactory(component)
			.create(this.injector)

		const domElem = (componentRef.hostView as EmbeddedViewRef<any>)
			.rootNodes[0] as HTMLElement

		this.outlet.nativeElement.appendChild(domElem)
	}
}

Comments

[Сергей]

Интересует компиляция именно из переменной. А в ней может быть как html так и компоненты ангуляра

[Дмитрий Лузанов]

Сергей, тогда надо гуглить в сторону ng-template.

[Дмитрий Лузанов]

Сергей, в 6ом ангуляре можно провнрнуть через Element. Сильно не вникал, но как натолкнулся - сразу вспомнил про этот вопрос.
https://youtu.be/y73NMviRoPY

[Сергей]

Predve4niy, Забавная реализация.)