Mam aplikację, w której mam komponent do przesyłania, w którym mogę przesłać plik. Jest osadzony w body.component.

Podczas przesyłania powinien używać funkcji (np. BodyComponent.thefunction()) Komponentu nadrzędnego (wywołanie, aby zaktualizować dane): ale tylko wtedy, gdy nadrzędny jest konkretnie body.component. Przesyłanie może być również używane w innym miejscu z innym zachowaniem.

Coś jak parent(this).thefunction(), jak to zrobić?

Utworzyłbym zdarzenie niestandardowe w komponencie podrzędnym. Coś w tym stylu:

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

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

Twój komponent nadrzędny może zarejestrować się na to wydarzenie

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

  someMethod(event) {
  }
}

Innym sposobem byłoby wstrzyknięcie komponentu rodzicielskiego do komponentu dziecięcego, ale będą one ze sobą silnie połączone ...

Poniżej pracuje dla mnie w najnowszym

Angular5

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

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

W ParentTemplateszablonie

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

Rozwiązanie bez wydarzeń.

Załóżmy, że mam ChildComponentiz tego, że chcę wywołać metodę, do myMethod()której należy ParentComponent(zachowując oryginalny kontekst rodzica).

Klasa komponentu nadrzędnego:

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

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

    myMethod() {
         ...
    }
}

Szablon nadrzędny:

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

Szablon podrzędny

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

    @Input() myMethod: Function;

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

Możesz wstrzyknąć komponent nadrzędny do komponentu podrzędnego.

Aby uzyskać więcej informacji, zobacz
- Jak wstrzyknąć komponent nadrzędny do komponentu podrzędnego?
- Komponent potomny Angular 2 odnosi się do komponentu nadrzędnego W ten sposób możesz upewnić się, że thefunction()jest wywoływany tylko wtedy, gdy rodzic jest body.component.

constructor(@Host() bodyComp: BodyComponent) {

W przeciwnym razie @Output()preferowane jest używanie do komunikacji między dzieckiem a rodzicem.