如何从使用 DCL loadintolocation() 加载的子组件调用父组件中的事件答案

【问题标题】：How to call an event in parent component from child component which is loaded using DCL loadintolocation()如何从使用 DCL loadintolocation() 加载的子组件调用父组件中的事件
【发布时间】：2016-05-12 07:00:31
【问题描述】：

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

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

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

这是我工作至今的 plunker 演示 http://plnkr.co/edit/2LJL4HxSc74XAyGmQMio?p=preview

【问题讨论】：

标签： angular

【解决方案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) {}

为了不将父子耦合得如此紧密，您还可以使用共享服务并传递它而不是父组件本身。

【讨论】：

【解决方案2】：

当你加载组件时，你可以订阅子事件，从那里你可以调用父函数。

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

更新

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

【讨论】：

Gunter 的回答很好，如果您从孩子那里了解父母。但是如果你想加载任何未知的组件并且你只知道事件，那么你可以在不耦合的情况下实现它。
好吧，Gunter 的回答也很好，但我不想在 child 中提及父组件...你能给我一个 plunker 演示吗，因为在你的回答中我没有提到父组件孩子...拜托兄弟
是的，我会在不需要时退订