Angular 4父子组件传值及调用父组件函数问题求助

Hey there! Let's troubleshoot why your ngx-bootstrap modal's confirm button isn't triggering that delete HTTP request. Since you're working with Angular and need to call a parent component function from your child modal component, here are the most reliable, Angular-friendly solutions to get this working:

This is the most maintainable approach because it keeps your parent and child components decoupled, following Angular's core design principles.

Step 1: Configure the child modal component #

Define an @Output emitter to send a confirmation signal (along with the item ID) back to the parent:

// delete-confirm-modal.component.ts
import { Component, Output, EventEmitter } from '@angular/core';
import { BsModalRef } from 'ngx-bootstrap/modal';

@Component({
  selector: 'app-delete-confirm-modal',
  templateUrl: './delete-confirm-modal.component.html'
})
export class DeleteConfirmModalComponent {
  @Output() confirmDelete = new EventEmitter<number>(); // Emit the item ID on confirm
  currentItemId: number;

  constructor(public modalRef: BsModalRef) {}

  // Call this when opening the modal to pass the target item ID
  setItemId(id: number) {
    this.currentItemId = id;
  }

  // Triggered when the modal's confirm button is clicked
  onConfirm() {
    this.confirmDelete.emit(this.currentItemId);
    this.modalRef.hide(); // Close the modal after emitting
  }

  onCancel() {
    this.modalRef.hide();
  }
}

Step 2: Connect the parent component to the modal #

Use ViewChild to reference the modal, and listen to its confirmDelete event to trigger your HTTP request:

<!-- parent-table.component.html -->
<!-- Include the modal component in your parent template -->
<app-delete-confirm-modal (confirmDelete)="handleDelete($event)"></app-delete-confirm-modal>

<!-- Table row delete button -->
<tr *ngFor="let item of tableData">
  <td>{{ item.name }}</td>
  <td>
    <button (click)="openDeleteModal(item.id)">Delete</button>
  </td>
</tr>

// parent-table.component.ts
import { Component, ViewChild } from '@angular/core';
import { DeleteConfirmModalComponent } from './delete-confirm-modal.component';
import { YourDataService } from '../services/your-data.service';

@Component({
  selector: 'app-parent-table',
  templateUrl: './parent-table.component.html'
})
export class ParentTableComponent {
  tableData: any[] = [];
  @ViewChild(DeleteConfirmModalComponent) deleteModal!: DeleteConfirmModalComponent;

  constructor(private dataService: YourDataService) {}

  // Open the modal and pass the target item ID
  openDeleteModal(itemId: number) {
    this.deleteModal.setItemId(itemId);
    this.deleteModal.modalRef.show();
  }

  // Handle the delete action triggered by the modal
  handleDelete(itemId: number) {
    // Your HTTP delete request logic here
    this.dataService.deleteItem(itemId).subscribe({
      next: () => {
        // Update the table data after successful deletion
        this.tableData = this.tableData.filter(item => item.id !== itemId);
      },
      error: (err) => {
        console.error('Failed to delete item:', err);
        // Add error handling (e.g., toast notification) here
      }
    });
  }
}

If you're using BsModalService to dynamically create the modal instead of having it in the parent template, you can subscribe to the modal's result directly:

Step 1: Update the child modal component #

// delete-confirm-modal.component.ts
import { Component, Input } from '@angular/core';
import { BsModalRef } from 'ngx-bootstrap/modal';

@Component({
  selector: 'app-delete-confirm-modal',
  templateUrl: './delete-confirm-modal.component.html'
})
export class DeleteConfirmModalComponent {
  @Input() itemId: number;

  constructor(public modalRef: BsModalRef) {}

  onConfirm() {
    // Pass true to indicate confirmation
    this.modalRef.close(true);
  }

  onCancel() {
    this.modalRef.close(false);
  }
}

Step 2: Open the modal from the parent and listen for results #

// parent-table.component.ts
import { Component } from '@angular/core';
import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
import { DeleteConfirmModalComponent } from './delete-confirm-modal.component';
import { YourDataService } from '../services/your-data.service';

@Component({
  selector: 'app-parent-table',
  templateUrl: './parent-table.component.html',
  providers: [BsModalService]
})
export class ParentTableComponent {
  tableData: any[] = [];
  modalRef?: BsModalRef;

  constructor(
    private modalService: BsModalService,
    private dataService: YourDataService
  ) {}

  openDeleteModal(itemId: number) {
    // Open the modal and pass the item ID as initial state
    this.modalRef = this.modalService.show(DeleteConfirmModalComponent, {
      initialState: { itemId: itemId }
    });

    // Subscribe to the modal's close event
    this.modalRef.onHidden?.subscribe(() => {
      if (this.modalRef?.content) {
        // Check if the user confirmed the deletion
        if (this.modalRef.content.confirmResult) {
          this.handleDelete(itemId);
        }
      }
    });
  }

  handleDelete(itemId: number) {
    // Same HTTP request logic as in方案1
    this.dataService.deleteItem(itemId).subscribe({
      next: () => {
        this.tableData = this.tableData.filter(item => item.id !== itemId);
      },
      error: (err) => {
        console.error('Deletion failed:', err);
      }
    });
  }
}

• Modal in *ngIf? If your modal component is wrapped in *ngIf, set static: false in your ViewChild declaration, or access it in the ngAfterViewInit lifecycle hook—otherwise, it will return undefined.
• Missing item ID: Always pass the correct row ID to the modal when opening it. Forgetting this will cause your delete request to target the wrong item (or none at all).
• Avoid direct parent references: Never use @ViewChild in the child component to reference the parent and call its methods. This creates tight coupling and makes components hard to reuse/maintain.

内容的提问来源于stack exchange，提问作者codemonkey00016