在 Angular 11 中将数据传输到模态？

Question

我在 html 页面上有一个数据表，该页面由对象数组填充。 每行都有一个删除按钮。 当您单击删除按钮时，会弹出一个模式，询问您是否真的要删除该行。

我试图弄清楚如何将行的 id 传输到模式中，以便当有人单击“是”时，我可以将该 id 发送到将从表中删除该条目的端点。

请记住，模式的代码与表格的代码在同一页上。 换句话说，模态不是一个单独的组件。

这是下面的代码和说明问题的屏幕截图...

<table class="table table-bordered table-striped mt-3">
          <thead>
            <tr>
              <th scope="col">Application</th>
              <th scope="col">Error Source</th>
              <th scope="col">Message</th>
              <th scope="col">StackTrace</th>
              <th scope="col">Date</th>
              <th scope="col">User</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let error of listOfErrors | paginate: { itemsPerPage: itemsPerPage, currentPage: page }">
              <td>{{ error.application }}</td>
              <td>{{ error.errorSource }}</td>
              <td>{{ error.message }}</td>
              <td>{{ error.stackTrace }}</td>
              <td>{{ error.date }}</td>
              <td>{{ error.user }}</td>
              <td class="edit-button">
                <button class="btn btn-primary"
                        type="button"                        
                        data-bs-toggle="modal"
                        attr.data-bs-target="#{{ deleteRoleModalId }}">
                  Delete
                </button>
              </td>
            </tr>
          </tbody>
        </table>

这是模式的代码（同样，在同一个 html 页面上）

<app-modal [id]="deleteRoleModalId"
               [title]="deleteRoleTitle">
      <p>Are you sure you want to delete this role? </p>

      <div class="mt-3">
        <button class="btn btn-primary float-start"
                type="button"              
                (click)="deleteRole()">
          Yes
        </button>
        <button class="btn btn-secondary me-1 float-start"
                type="button"               
                data-bs-dismiss="modal">
          No
        </button>
      </div>
    </app-modal>

这就是对象数组的样子......

public listOfErrors: any[] = [
    {
      id: 1,
      application: "Default Case Set",
      errorSource: "CASEWORK",
      message: 34,
      stackTrace: 0,
      date: 0,
      user: 0
    }
  ];

桌子是这样的……

这就是模态的样子......

Answer 1

假设模态组件是主组件的子组件（因为您提到它们在同一页面中），id通过@Input（）从父组件传递给模态组件，然后您可以将数据传递给父组件（已删除/未删除）通过 eventEmitter 和 @Output() 装饰器。

在官方文档中查看这里是如何实现的： https://angular.io/guide/component-interaction

另一种选择可能是使用服务和可观察对象，这是另一种可行的方法，尽管处理组件之间的信息通信有点复杂。 当组件不相关时，这种方法特别有用。

Answer 2

我将创建模态作为它自己的组件并使用 angular 模态指令。 通过这种方式，您还可以丰富该组件，使其对任何类型的删除都有用。 换句话说，这个组件可以负责删除东西。

export class DeleteModalComponent {

    @ViewChild('modal', { static: true }) modal: ModalDirective;

  public deleteId= '';
    
  show(id: string): void {
        this.deleteId = id
        this.modal.show();
    }

  delete(): void {
  //Delete logic here with this.deleteId
  }

 close(): void {
        this.modal.hide();
    }
}

因此，在您的表格组件 ts 文件中，您将调用模式的“show”方法来打开它，以及 rowId（errorId？）

/// Add the modal as a viewchild to your table component

     @ViewChild('deleteModal', { static: true }) deleteModal: DeleteModalComponent;

     openDeleteModal(rowId: string): void {
            this.deleteModal.show(rowId);
        }

因此在 HTML 中：

  <table class="table table-bordered table-striped mt-3">
              <thead>
                <tr>
                  <th scope="col">Application</th>
                  <th scope="col">Error Source</th>
                  <th scope="col">Message</th>
                  <th scope="col">StackTrace</th>
                  <th scope="col">Date</th>
                  <th scope="col">User</th>
                </tr>
              </thead>
              <tbody>
                <tr *ngFor="let error of listOfErrors | paginate: { itemsPerPage: itemsPerPage, currentPage: page }">
                  <td>{{ error.application }}</td>
                  <td>{{ error.errorSource }}</td>
                  <td>{{ error.message }}</td>
                  <td>{{ error.stackTrace }}</td>
                  <td>{{ error.date }}</td>
                  <td>{{ error.user }}</td>
                  <td class="edit-button">
                    <button class="btn btn-primary"
                            type="button"                        
                            data-bs-toggle="modal"
                            (click)="openDeleteModal(error.id)"
                      Delete
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>

   <deleteModal #deleteModal></deleteModal>