How to trigger an event in a parent component from a child component that is loaded using DCL loadintolocation ()

I have an event in the parent component. I want to trigger this event from a child component created using DCL loadintolocation(). I follow this logic in a child component to raise an event

@Output() myevent1: EventEmitter;
onSubmit() {
  console.log(this.myForm.value);
  this.myevent1.emit();
}

I can raise events for components that are already mentioned, but not for components created using DCL. Tell us how to raise an event in a parent component from dynamically created components.

Here is the demo version of the plunker that I have been working on so far http://plnkr.co/edit/2LJL4HxSc74XAyGmQMio?p=preview

+4
source share
2 answers

subscsribe , .

dcl.loadIntoLocation(ChildComponent, elementRef, 'child')
  .then((newComponent) => {
    newComponent.instance.event.subscribe(() => { .. call your parent ..});
  })

. plunker : http://plnkr.co/edit/DNmtl6TG5s2dsEUlVTvw?p=preview

+4

.16

dcl.loadIntoLocation() ViewContainerRef .

@Component({
    selector: 'dynamic',
    template: `
    <h1 (click)="null">I'm the dynamic component</h1>
    <button (click)="someEvent.emit($event)">click me</button>
    `,
})
export class DynamicComponent {
  someEvent = new EventEmitter();
}
@Component({
    selector: 'my-app',
    template: `
    <h1>Hello</h1>
    <div>
      <div>clicked at (top): {{top}}</div>
      <span>dynamic component below</span>
      <div #target></div>
    </div>
    `,
})
export class AppComponent {
  @ViewChild('target', {read: ViewContainerRef}) target;
  top;

  constructor(private dcl:DynamicComponentLoader) {}
  ngAfterViewInit() {
    this.dcl.loadNextToLocation(DynamicComponent, this.target)
    .then(ref => {
      ref.instance.someEvent
      .subscribe(value => {
        console.log(value.clientX);
        this.top = value.clientX; 
        console.log(this.top);
      })
    });
  }
}

beta.17

loadIntoLocation(
    SomeComponent, 
    someElementRef, 
    'someAnchor',
    [/*other providers, */
        provide(ParentComponent, useValue: this)]);

.

constructor(parent: ParentComponent) {}

, .

+4

Source: https://habr.com/ru/post/1622685/


All Articles