Создайте компонент и добавьте в div

Question

У меня есть <div> с директивой [appComponent], поэтому я могу создать компонент и добавить к нему.

<div [appComponent]="component">

Моя директива выглядит следующим образом:

@Directive({
  selector: '[appComponent]'
})
export class ComponentDirective implements OnChanges {
  @Input('appComponent') comp: any;
  private container;

  constructor(private elementRef: ElementRef, private renderer: Renderer2) {
    this.container = this.elementRef.nativeElement;
  }

  ngOnChanges(changes: SimpleChanges): void {
    const newComponent = this.renderer.createElement('new-component');
    this.renderer.appendChild(this.container, newComponent);
  }
}

И мой new-component:

@Component({
  selector: 'new-component',
  templateUrl: './new-component.html',
  styleUrls: ['./new-component.scss']
})
export class NewComponent {
}

Этот компонент имеет содержимое внутри.Элемент создан и добавлен в div, однако он пуст:

<div>
    <new-component _ngcontent-c3=""></new-component>
</div>

Как создать экземпляр компонента и добавить его в div?Я использую угловой 7.

Answer 1

Для этого вам не нужны ElementRef и Renderer2.

Попробуйте вместо этого:

@Directive({
  selector: '[appComponent]'
})
export class ComponentDirective implements OnChanges {
  @Input('appComponent') comp: any;

  constructor(private componentFactoryResolver: ComponentFactoryResolver, public viewContainerRef: ViewContainerRef) {
  }

  ngOnChanges(changes: SimpleChanges): void {
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(NewComponent);
    const componentRef = this.viewContainerRef.createComponent(componentFactory);
    this.viewContainerRef.insert(componentRef.hostView);
  }
}

Одна важная вещь, которую стоит упомянуть, - заставить эту работу работатьВы должны добавить NewComponent к entryComponents следующим образом:

@NgModule({
  imports [...],
  entryComponents: [NewComponent],
  declarations: [NewComponent, ComponentDirective, ...],
  bootstrap: [...]
})
export class AppModule { }

Вот рабочий пример: https://stackblitz.com/edit/angular-dbszef

Answer 2

Попробуйте использовать ViewContainerRef и ComponentFactoryResolver,

let componentFactory = 
    this.componentFactoryResolver.resolveComponentFactory(NewComponent);
let componentInstance = 
    this.viewContainerRef.createComponent(componentFactory);
this.renderer.appendChild(this.container, 
    componentInstance.location.nativeElement);