У меня есть приложение, в котором есть компонент загрузки, в котором я могу загрузить файл. Он встроен в body.component.

При загрузке он должен использовать функцию (например BodyComponent.thefunction()) родительского компонента (выполнить вызов для обновления данных): но только если это родительский компонент body.component. Загрузку также можно использовать в другом месте с другим поведением.

Что-то вроде parent(this).thefunction(), как это сделать?

Я бы создал настраиваемое событие в дочернем компоненте. Что-то такое:

@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) {
  }
}

Другой способ - вставить родительский компонент в дочерний, но они будут прочно связаны друг с другом ...

Ниже работает у меня в последнем

Угловой5

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

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

В ParentTemplateшаблоне

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

Решение без вовлеченных событий.

Предположим, что у меня есть 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()
}

Вы можете вставить родительский компонент в дочерний компонент.

Дополнительные сведения см. В разделе
- Как вставить родительский компонент в дочерний компонент?
- Дочерний компонент Angular 2 относится к родительскому компоненту. Таким образом, вы можете гарантировать, что он thefunction()будет вызываться только тогда, когда родителем является body.component.

constructor(@Host() bodyComp: BodyComponent) {

В противном случае использование @Output()предпочтительнее для общения от ребенка к родителю.