Угловая 13 директива viewContainerRef.createComponent передает объект созданному компоненту

Код ниже с динамическим созданием компонента в Angular 13

Директива:

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

@Directive({
  selector: '[appLoader]'
})
export class LoaderDirective {

  @Input() appLoader!: Type<any>;

  constructor(private viewContainerRef: ViewContainerRef) {}

  ngOnInit(): void {
    this.viewContainerRef.createComponent(this.appLoader);
  }

}

app.component.html

      <div [appLoader]="component"></div>

app.component.ts

      component = MyComponent

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

Как я могу это сделать?

1 ответ

Я предполагаю, что ваша директива может быть чем-то вроде

      export class LoaderDirective {

  @Input() appLoader!: Type<any>;
  @Input() arg:any;  //<--you pass as arg any object

  //you need inject ComponentFactoryResolver
  constructor(private viewContainerRef: ViewContainerRef,
              private componentFactoryResolver: ComponentFactoryResolver) {}

  ngOnInit(): void {
    //first you "create" a component
    const component=this.componentFactoryResolver.resolveComponentFactory(this.appLoader)
    //in componentRef you get a instance of the component
    const componentRef=this.viewContainerRef.createComponent(component);

    //you can access to the component using componentRef.instance
    //e.g. componentRef.instance.someMethod()
    //     componentRef.instance.prop="what-ever"

    //I choose use the object pass in the "arg" Input
    Object.keys(this.arg).forEach(x=>{
      componentRef.instance[x]=this.arg[x]
    })
  }

Вы используете как

      <div [appLoader]="component" [arg]="{name:'Angular'}"></div>

Увидеть дурак стекблиц

Другие вопросы по тегам