Question

我想在我的childEvent上添加一个eventListener，但我不知道该怎么做。

我使用ViewContainerRef.createComponent（）方法在SchemaExploitationComponent中动态创建组件，该方法返回ComponentRef对象。

我需要动态地向该组件添加一个事件监听器，以便它调用SchemaExploitationComponent中定义的ajouterEvenement方法。

父类：

@Component({
  selector: 'app-schema-exploitation',
  template: ` <div #parent (evenement)="ajouterEvenement($event)"></div> `
  styleUrls: ['./schema-exploitation.component.css']
})
export class SchemaExploitationComponent implements OnInit {

  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;
  @ViewChild('parent', { read: ViewContainerRef }) container: ViewContainerRef;

  ajouterEvenement(evenement) {
    console.log(evenement);
  }

  ouvrirModal(evenement: string) {


    if (evenement == "Alarme")
    {
      let comp:ComponentFactory<RegroupementAlarmeComponent> = this._cfr.resolveComponentFactory(RegroupementAlarmeComponent);
      var alarmeComponent = this.container.createComponent(comp);
      alarmeComponent.instance._ref = alarmeComponent;

    }
    if (evenement == "Appel Client")
    {
     // here dynamic component created

     let comp:ComponentFactory<RegroupementAppelClientComponent> = this._cfr.resolveComponentFactory(RegroupementAppelClientComponent);
      let appelClientComponent = this.container.createComponent(comp);
      appelClientComponent.instance._ref = appelClientComponent;
    }
    if (evenement == "TD")
    {

      let comp:ComponentFactory<RegroupementTdComponent> = this._cfr.resolveComponentFactory(RegroupementTdComponent);
      var tdComponent = this.container.createComponent(comp);
      tdComponent.instance._ref = tdComponent;
    }
  }

  constructor(
    protected schema: SchemaExploitationService,
    protected route: ActivatedRoute,
    private _cfr: ComponentFactoryResolver
  ) {}

  ngOnInit() {

    });
  }
}

动态子类：

@Component({
  selector: 'app-regroupement-alarme',
  template: `
             <buttontype="button" label="Valider" (click)="ajouterAlarme()"></button> 
  `,
  styleUrls: ['./regroupement-alarme.component.css']
})
export class RegroupementAlarmeComponent implements OnInit {

  @Output() evenement = new EventEmitter<Alarme>();
  _ref:any;
  alarme:Alarme = new Alarme();

  removeObject()
  {
    this._ref.destroy();
  }
  ajouterAlarme()
  {
    this.evenement.emit(this.alarme);
    this.removeObject();
  }

  constructor() { }

  ngOnInit() {
  }

}

我想传递对象＆＃34; Alarme＆＃34;使用EventEmmitter从我的子组件到我的parentComponent，但它就像我的父母不听我的事件。

Answer 1

你试过这个吗？

  alarmeObjectFromChild: any;

  ouvrirModal(evenement: string) {


    if (evenement == "Alarme")
    {
      let comp:ComponentFactory<RegroupementAlarmeComponent> = this._cfr.resolveComponentFactory(RegroupementAlarmeComponent);
      var alarmeComponent = this.container.createComponent(comp);
      alarmeComponent.instance.evenement.subscribe((alarmeObjectYouWant) => {
        this.alarmeObjectFromChild = alarmeObjectYouWant;
        //do whatever you want
      })
      alarmeComponent.instance._ref = alarmeComponent;

    }
  }

这里有解决方案https://github.com/solenski/stackoverflow47683459.git

的github repo

将EventListener添加到动态子角度

父类：

动态子类：

1 个答案: