首页 文章

将EventListener添加到动态子角度

提问于
浏览
0

我想在我的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() {
  }

}

我想使用EventEmmitter将对象“Alarme”从我的子组件传递给我的parentComponent,但它就像我的父母不听我的事件 .

1 回答

  • 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;
    
        }
      }
    

    在这里你有解决方案的github回购https://github.com/solenski/stackoverflow47683459.git

相关问题