Почему родитель не слушает ребенка на Angular?

Question

Я не могу заставить работать этот даже передатчик. Можете ли вы помочь? Я новичок, и это должен быть довольно простой код для вас. У меня есть родительский компонент, который читает два разных излучателя от двух разных потомков:

<app-van [vans]="vans"></app-van>
<app-modal *ngIf="modalOpen" (closed)="onClick()" (openModal)="onClickTwo($event)"></app-modal>

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


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

  modalOpen = true;

  vans: Van [] = [
    { name: 'Ubeddu', description: 'Mercedes Sprinter', plate: 'NH55GKA' },
    { name: 'Abbestia', description: 'Ford Transit', plate: 'DK66HHR' },
    { name: 'Eumulu', description: 'Citroen Berlingo', plate: 'DR55MKL' }
  ];


  constructor( ) { }

  ngOnInit() {
  }

  onClick() {
    this.modalOpen = !this.modalOpen;
    console.log('modalOpen changed');
  }

  onClickTwo(event) {
    this.modalOpen = event;
    console.log('modalOpen changed');
  }
}

родитель слушал этого потомка:

<div (click)="onCloseClick()" class="ui dimmer visible active">
  <div  (click)="$event.stopPropagation()" class="ui modal visible active">
    <div class="asuca">
      <form class="ui form" >
        <h4 class="ui dividing huge header">Van</h4>

        <div class="required field">
          <label class="ui header">Van Name</label>
          <input type="text"  placeholder="Van NickName">
        </div>

        <div class="field">
          <label class="ui header">Description</label>
          <input type="text"placeholder="Description">
        </div>

        <div class="field">
          <label class="ui header">Plate</label>
          <input type="text"placeholder="License Plate">
        </div>

        <button (click)="onCloseClick()" class="ui button" type="submit">Submit</button>
      </form>
    </div>
  </div>
</div>

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

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

  @Output() closed = new EventEmitter();

  constructor(private el: ElementRef) { }

  ngOnInit() {
    document.body.appendChild(this.el.nativeElement);
  }

  // tslint:disable-next-line: use-lifecycle-interface
  ngOnDestroy() {
   this.el.nativeElement.remove();
  }

  onCloseClick() {
    this.closed.emit();
    }
}

и не слушает второй потомок:

  <div  class="ui fluid four black cards">
    <div *ngFor="let van of vans" class="card">
      <div class="content">
        <div class="header">
          {{ van.name }}
        </div>
        <div class="meta">
          {{ van.description }}
        </div>
        <div class="description">
          {{ van.plate }}
        </div>
      </div>
      <div class="extra content">
        <div class="ui two buttons">
          <div (click)="onEditClick(true)" class="ui basic black button">Edit</div>
          <div class="ui basic red button">Delete</div>
        </div>
      </div>
    </div>
  </div>

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


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

  @Input() vans = [];

  @Output() openModal = new EventEmitter<boolean>();

  constructor() { }

  ngOnInit() {
  }

  onEditClick(event: boolean) {
    this.openModal.emit(event);
      }
}

Все дело в том, чтобы скрыть модальное нажатие по экрану и показать его снова нажатием кнопки. В файле console.log объект-эмиттер первого дочернего элемента имеет наблюдателя, а объект-эмиттер вторым дочерним элементом как ничто; Понятия не имею, что значит, хотя.

заранее спасибо за помощь. Я могу предоставить всю папку, если это необходимо. Я просто пытаюсь научиться:)

Answer 1

Похоже, вы пропустили привязку выходного события в родительском шаблоне. Пожалуйста, исправьте, как показано ниже:

<app-van [vans]="vans" (openModal)="onEditClick($event)"></app-van>