Angular2 функция вызова родительского компонента

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

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

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

Ответы

Ответ 1

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

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

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

Ваш родительский компонент может зарегистрироваться на этом мероприятии

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

  someMethod(event) {
  }
}

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

Ответ 2

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

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

constructor(@Host() bodyComp: BodyComponent) {

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

Ответ 3

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

Angular4

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

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

В шаблоне ParentTemplate

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