父组件的angular2调用函数

Question

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

中

在上传时，它应该使用父组件的一个函数（例如BodyComponent.thefunction()）（进行一次更新数据的调用）：但是只有父项具体是body.component。上传也可能在其他地方使用，但行为不同。

像parent(this).thefunction()之类的东西，怎么做？

Answer 1

我会在子组件中创建一个自定义事件。这样的事情：

DomainLocalModule

您的父组件可以在此活动中注册

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

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

另一种方法是在子代码中注入父组件，但它们将强烈地链接在一起......

Answer 2

以下是最新的

Angular5

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

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

在ParentTemplate的模板中

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

Answer 3

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

有关详情，请参阅
- How do I inject a parent component into a child component?
- Angular 2 child component refers to parent component 这样，您可以确保仅在父级为thefunction()时调用body.component。

constructor(@Host() bodyComp: BodyComponent) {

否则，首选使用@Output()进行从孩子到父母的沟通。

Answer 4

没有涉及事件的解决方案。

假设我有一个export const foo = (x: SuperTypeOfA): number => { if (isOfTypeA(x)) return x.num; return -1;} interface A {tag: "A"; num: number; }; const isOfTypeA= (x: any): x is A=> x.tag === "A"; type SuperTypeOfA = A | B | C | D | E; ，我希望调用属于ChildComponent的方法myMethod()（保留原始父级的上下文）。

父组件类：

ParentComponent

父模板：

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

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

    myMethod() {
         ...
    }
}

儿童模板

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