функція виклику angular2 батьківського компонента


83

У мене є програма, де є компонент завантаження, куди я можу завантажити файл. Він вбудований в body.component.

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

Щось на зразок parent(this).thefunction(), як це зробити?

Відповіді:


145

Я б створив власну подію в дочірньому компоненті. Щось таке:

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

Іншим способом буде введення батьківського компонента в дочірній, але вони будуть міцно пов’язані між собою ...


Будь-яка ідея, чому у мене є невизначена вихідна помилка? Це визначається в машинописі вгорі шляхом імпорту з angular2/core. Журнал консолі показує проблему з angular2-
polyfills

О, у моїй відповіді є помилка: @Ouputзамість @Output. Це може бути проблема ... Я оновив свою відповідь.
Тьєррі Темплієр

Хе, не помітив. Це було все.
PascalVKooten

Тепер отримую uploadComplete is not definedПримітку, що я просто скопіював їх як приклади. У батьків також є "someMethod", але у нього вже є проблема з uploadComplete. Батьківський компонент використовує (завантажене) прив'язку дочірнього вузла, і він вже мав дочірню директиву.
PascalVKooten

4
директиви та труби всередині @Component застаріло від кутового RC6.
alex351

47

Нижче працює для мене останнім часом

Кутова5

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

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

У ParentTemplateшаблоні

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

3
Це хороше рішення, оскільки воно просте, і батьки вирішують, який метод викликати. Мені подобається :-)
Джетт

1
Що робити, якщо я використовую маршрутизатор-розетку? Чи можу я все-таки використовувати (myEvent)?
Роберт Вільямс,

Його для дочірнього компонента, що використовується всередині батьківського компонента. Не впевнений щодо маршрутизатора. Можливо, це питання вам допоможе. stackoverflow.com/questions/45949476 / ...
Шаббір Dhangot

32

Рішення без участі у подіях.

Припустимо, що у мене є 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()
}

1
Я намагався використовувати це, але це не працює для мене. У моїй версії myMethod він посилається на набір вкладок батьківського компонента (я намагаюся переключити вкладки з дочірнього батька). Коли я посилаюся на це в батьківському, все працює. Від дитини це потрапляє в myMethod, але не змінюючи вкладку. Тому мені цікаво, чи набір вкладок, на який він посилається, є копією справжнього, коли дитина отримує до нього доступ. Я насправді не впевнений, що тут відбувається, коли this.myMethod.bind(this)повертають. (Можливо, я замість цього роблю щось принципово неправильно.)
Кетрін Осборн,

Я знаю, але я не використовую восьму версію. Мені це потрібно для Ionic 3, який використовує версію 5.
Василіс, Греція,

@VasilisGreece Я не знаю, як вам допомогти, але настійно рекомендую оновити до останньої іонічної версії (на даний момент 4)
Франческо Борзі,

Найпростіший і прямий спосіб викликати батьківський метод, уникаючи зайвого імпорту. Використання Angular 10 у 2020-11-13. Оцінено.
CPHPython

23

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

Детальніше див.
- Як ввести батьківський компонент у дочірній компонент?
- Дочірній компонент Angular 2 відноситься до батьківського компонента. Таким чином ви можете переконатися, що thefunction()його викликають лише тоді, коли батьківським є body.component.

constructor(@Host() bodyComp: BodyComponent) {

В іншому випадку використання @Output()переважно для спілкування від дитини до батьків.


1
До речі, мені довелося зробити constructor(@Host() bodyComp: BodyComponent).. можливо, це було нещодавно змінено. Чудово працює, thx!
Едді Вербругген,

Багато, я щось переплутав - виправив
Гюнтер Цохбауер
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.