父组件的angular2调用函数

Question

我有一个应用程序,我有一个上传组件,我可以上传文件.它嵌入在body.component.

在上传时,它应该使用BodyComponent.thefunction()父组件的一个函数(例如)(执行调用来更新数据):但是只有父元素是特定的body.component.上传也可能在其他地方使用,具有不同的行为.

有点像parent(this).thefunction(),怎么做？

Answer 1

我会在子组件中创建一个自定义事件.像这样的东西:

@Component({
  selector: 'child-comp',
  (...)
})
export class ChildComponent {
  @Output()
  uploaded = new EventEmitter<string>();

  uploadComplete() {
    this.uploaded.emit('complete');
  }

您的父组件可以在此事件上注册

@Component({
  template `
    <child-comp (uploaded)="someMethod($event)"></child-comp>
  `,
  directives: [ ChildComponent ]
})
export class ParentComponent {
  (...)

  someMethod(event) {
  }
}

另一种方法是将父组件注入子组件中,但它们将紧密连接在一起...

Answer 2

以下是最新的工作

Angular5

class ChildComponent {
  @Output() myEvent = new EventEmitter<string>();

  callParent() {
    this.myEvent.emit('eventDesc');
  }
}

在ParentTemplate模板中

<child-component (myEvent)="anyParentMehtod($event)"

Answer 3

没有事件的解决方案.

假设我有一个ChildComponent和我想要调用myMethod()属于的方法ParentComponent(保持原始父级的上下文).

父组件类:

@Component({ ... })
export class ParentComponent {

    get myMethodFunc() {
        return this.myMethod.bind(this);
    }

    myMethod() {
         ...
    }
}

父模板:

<app-child [myMethod]="myMethodFunc"></app-child>

儿童模板

@Component({ ... })
export class ChildComponent {

    @Input() myMethod: Function;

    // here I can use this.myMethod() and it will call ParentComponent's myMethod()
}

Answer 4

您可以将父组件注入子组件.

有关更多详细信息,请参阅
- 如何将父组件注入子组件？
- Angular 2子组件引用父组件 这种方式可以确保thefunction()仅在父组件为a时调用body.component.

constructor(@Host() bodyComp: BodyComponent) {

否则@Output()优先使用从孩子到父母的沟通.