Question

我有一个页面，当用户想要重置表单时弹出确认模式，然后当用户删除页面项目时再弹出另一个确认模式。目前的问题是，这两个动作只打开了一个模态而不确定原因。

是否有规则说每页可能有一个模态？

这就是我在我的组件中所拥有的：

@ViewChild(ModalComponent)
    private resetDialog: ModalComponent;
    private removeDialog: ModalComponent;

private openResetDialog() {
        this.resetDialog.open();
    }

private resetDialogConfirmed() {
    this.reset();
    this.resetDialog.close();
}

private resetDialogDeclined() {
    this.resetDialog.close();
}

private openRemoveDialog() {
    this.removeDialog.open();
}

private removeDialogConfirmed(item: number) {
    this.onRemove(item);
    this.removeDialog.close();
}

private removeDialogDeclined() {
    this.removeDialog.close();
}

在我的html页面中，我有：

<confirmation-modal #resetDialog [title]="resetMessage">
        <div>
            <button type="button" (click)="resetDialogConfirmed()">Yes</button>
            <button type="button" (click)="resetDialogDeclined()">No</button>
        </div>
    </confirmation-modal>

    <confirmation-modal #removeDialog [title]="removeMessage">
        <div>
            <button type="button"(click)="removeDialogConfirmed(i)">Yes</button>
            <button type="button"(click)="removeDialogDeclined()">No</button>
        </div>
    </confirmation-modal>

这是我必须触发重置的按钮：

  <button (click)="openResetDialog()">Reset</button>

这就是我必须触发删除的内容：

 <a (click)="openRemoveDialog()">Remove</a>

当我点击两者时 - 重置对话框打开了。

Answer 1

@ViewChild仅适用于一个孩子，你应该使用@ViewChildren。

有关详情，请参阅以下文章：

https://netbasal.com/understanding-viewchildren-contentchildren-and-querylist-in-angular-896b0c689f6e

页面上有两个模态，但只有一个模式打开角度2中的所有操作

1 个答案: