javascript - 为什么家长不听 child 在 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');
  }
}

家长听了这个 child 的讲话:

<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();
    }
}

并且不听第二个 child 的话:

  <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

似乎您错过了在父模板中绑定(bind)输出事件。请按如下方式更正:

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