Ich habe eine App, in der ich eine Upload-Komponente habe, in die ich eine Datei hochladen kann. Es ist eingebettet in die body.component.

Beim Hochladen sollte eine Funktion (z. B. BodyComponent.thefunction()) der übergeordneten Komponente verwendet werden (Aufruf zum Aktualisieren der Daten): jedoch nur, wenn es sich bei der übergeordneten Komponente speziell um die handelt body.component. Der Upload kann auch an anderer Stelle mit unterschiedlichem Verhalten verwendet werden.

So etwas wie parent(this).thefunction(), wie geht das?

Ich würde ein benutzerdefiniertes Ereignis in der untergeordneten Komponente erstellen. Sowas in der Art:

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

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

Ihre übergeordnete Komponente könnte sich bei diesem Ereignis registrieren

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

  someMethod(event) {
  }
}

Ein anderer Weg wäre, die übergeordnete Komponente in die untergeordnete Komponente zu injizieren, aber sie werden stark miteinander verbunden sein ...

Unten wird für mich spätestens gearbeitet

Angular5

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

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

In ParentTemplateder Vorlage

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

Lösung ohne Ereignisse.

Angenommen, ich habe ein ChildComponentund von diesem möchte ich die Methode aufrufen, myMethod()die dazu gehörtParentComponent (wobei der Kontext des ursprünglichen Elternteils beibehalten wird).

Übergeordnete Komponentenklasse:

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

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

    myMethod() {
         ...
    }
}

Übergeordnete Vorlage:

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

Untergeordnete Vorlage

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

    @Input() myMethod: Function;

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

Sie können die übergeordnete Komponente in die untergeordnete Komponente einfügen.

Weitere Informationen finden Sie unter
- Wie füge ich eine übergeordnete Komponente in eine untergeordnete Komponente ein?
- Die untergeordnete Komponente von Angular 2 bezieht sich auf die übergeordnete Komponente. Auf diese Weise können Sie sicherstellen, dass sie thefunction()nur aufgerufen wird, wenn die übergeordnete Komponente a ist body.component.

constructor(@Host() bodyComp: BodyComponent) {

Andernfalls wird die Verwendung @Output()bevorzugt, um vom Kind zum Elternteil zu kommunizieren.