Question

我在父组件中有一个事件。我想从使用DCL loadintolocation()创建的子组件中调用该事件。我在子组件中遵循此逻辑来引发事件

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

我能够为已经提到的组件引发事件，但不能引发使用DCL创建的组件的事件。请告诉我如何从动态创建的组件中提升父组件中的事件。

以下是我迄今为止所使用的插件演示http://plnkr.co/edit/2LJL4HxSc74XAyGmQMio?p=preview

Answer 1

更新beta.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);
      })
    });
  }
}

Plunker example beta.17

<强>原始

用

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

您可以将父组件传递给动态创建的组件。

在子组件中，您只需将父项添加到构造函数参数列表

constructor(parent: ParentComponent) {}

为了不将父母和孩子紧密地联系在一起，你也可以使用共享服务并传递它而不是父组件本身。

Answer 2

加载组件时，您可以将子语言包含在可以调用父函数的子事件中。

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

更新

在此处查看plunker：http://plnkr.co/edit/DNmtl6TG5s2dsEUlVTvw?p=preview

如何从使用DCL loadintolocation（）加载的子组件调用父组件中的事件

2 个答案: