Angular - выбрасываемое событие не доходит до родительского компонента - PullRequest
Новая
       7

Angular - выбрасываемое событие не доходит до родительского компонента

0 голосов
/ 08 мая 2018

Я пытаюсь передать событие из дочернего компонента в родительский компонент. Вот часть файла TS родительского файла: 

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-car-detail',
  templateUrl: './car-detail.component.html',
  styleUrls: ['./car-detail.component.css'],
})
export class CarDetailComponent implements OnInit {
  constructor() { }

  ngOnInit() {
    this.getCarDetail(this.route.snapshot.params['id']);
  }

  refreshList(event){
    console.log("Parent called");
  }
}

И часть шаблона, касающаяся эмиттера 

<app-operations (myEvent)="refreshList($event)"></app-operations>

Вот дочерний файл TS: 

import {Component, EventEmitter, OnInit, Output} from '@angular/core';


@Component({
  selector: 'app-add-operation',
  templateUrl: './add-operation.component.html',
  styleUrls: ['./add-operation.component.css']
})
export class AddOperationComponent implements OnInit {


  @Output() myEvent = new EventEmitter<any>();

  constructor() { }

  ngOnInit() {
  }

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

}

и кнопка для проверки вызова метода callParent: 

<button (click)="callParent()">call</button>

Когда я нажимаю кнопку, я вижу, что метод callParent запущен, но метод, который должен быть запущен в родительском (refreshList), нет. Я просмотрел несколько примеров и не понимаю, почему это не работает.

Ответы [ 3 ]

0 голосов
/ 08 мая 2018

Ваше мнение ссылается на неправильный компонент. Попробуйте это: 

<app-add-operation (myEvent)="refreshList($event)"></app-add-operation>
0 голосов
/ 08 мая 2018

Пожалуйста, добавьте эту функцию на ваш дочерний компонент. Вы можете сослаться на этот документ Взаимодействие с компонентом 

 myEvent(event: any) {
     console.log(event);
  }
0 голосов
/ 08 мая 2018

Генераторы событий влияют только на непосредственного родителя компонента, поэтому вам нужно будет передать событие от app-add-operation до app-operation, а затем app-car-detail.

См. Событие Emit через вложенные компоненты в Angular2

...