Question

这是一个较大的项目的一部分，我试图通过此示例进行简化。我使用PrimeNg巴比伦主题。我有一个父组件，该组件具有一个for循环，该循环生成一个按钮，以及一个子组件，其中子对话框的每次迭代都带有对话框。单击此按钮后，将激活PrimeNg对话框。但由于它是按钮和对话框的循环，因此单击这些按钮中的任何一个都会打开每个对话框。（总计3个）。问题是我不知道如何仅单击按钮的目标，它是从父级到子级组件的所有对话框，而不是所有按钮。我是Angular的新手。有人可以帮忙吗？ app.component.html父组件的代码是：

  <div *ngFor="let item of items; let i = index">
    <button type="button" (click)="showDialog(i)" pButton icon="pi pi-info-circle" label="Show"></button>
    <app-child (notify)="parentListener($event)"></app-child>
  </div>
</div>

app.component.ts的代码为：


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  display = false;
  items = [
    {1: 1}, {2: 2}, {3: 3}
  ];

  showDialog() {
    this.display = true;
  }

  parentListener(data) {
    this.display = data;
  }
}

child.component.html的代码是：

<p-dialog header="Godfather I" [(visible)]="display" [modal]="true" [responsive]="true" [style]="{width: '350px', minWidth: '200px'}" [minY]="70"
          [maximizable]="true" [baseZIndex]="10000">
  <p>The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
    His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
    Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
    kind and benevolent to those who give respect,
    but given to ruthless violence whenever anything stands against the good of the family.</p>
  <p-footer>
    <button type="button" pButton icon="pi pi-check" (click)="display=false" label="Yes"></button>
    <button type="button" pButton icon="pi pi-close" (click)="returningDataToParent()" label="No" class="ui-button-secondary"></button>
  </p-footer>
</p-dialog>

和child.component.ts的代码是：

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

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {
  @Input ()
  display: boolean;
@Output ()
notify: EventEmitter<boolean> = new EventEmitter<boolean>();

  constructor() { }

  ngOnInit() {

  }

  returningDataToParent() {
    this.notify.emit(false);
  }
}

在Angular中单击按钮时，仅从父组件的子组件中打开一个对话框PrimeNG对话框

0 个答案: