如何通过按钮点击关闭AppComponent中打开的SigninComponent模态弹窗？

Since your modal is opened from AppComponent but the close action triggers inside SigninComponent, you need a way to pass the modal's close functionality down to the child component. Here's the simplest, most direct approach:

Step 1: Add an Input for the Close Function in SigninComponent #

First, update your signin.component.ts to accept a close function as an input property:

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

@Component({
  selector: 'app-signin',
  templateUrl: './signin.component.html'
})
export class SigninComponent {
  // This input will hold the modal's close function
  @Input() closeModal: () => void;
}

Step 2: Pass the Close Function to SigninComponent in AppComponent's Template #

Modify your app.component.html to pass the close function (from the ng-template's let-c="close") into the SigninComponent:

<ng-template #content let-c="close" let-d="dismiss">
  <!-- Pass the modal's close function to SigninComponent -->
  <app-signin [closeModal]="c"></app-signin>
</ng-template>

Step 3: Add a Close Button in SigninComponent's Template #

Finally, add a button in signin.component.html that calls the passed-in close function when clicked:

<!-- Example close button inside your SigninComponent -->
<button (click)="closeModal()">Close Modal</button>

Alternative: Shared Service for Flexible Scenarios #

If you need to reuse SigninComponent across multiple modals or pages, a shared service is a better option:

1. Create a Modal Communication Service:

import { Injectable, EventEmitter } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class ModalCommService {
  // Emit an event when the modal should close
  closeRequested = new EventEmitter<void>();
}

2. Emit Close Event from SigninComponent:

import { Component } from '@angular/core';
import { ModalCommService } from './modal-comm.service';

@Component({
  selector: 'app-signin',
  templateUrl: './signin.component.html'
})
export class SigninComponent {
  constructor(private modalCommService: ModalCommService) {}

  onCloseClick() {
    this.modalCommService.closeRequested.emit();
  }
}

3. Listen for Close Event in AppComponent:

import { Component, OnInit } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { ModalCommService } from './modal-comm.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  private activeModal: any;

  constructor(
    private modalPopup: NgbModal,
    private modalCommService: ModalCommService
  ) {}

  ngOnInit() {
    // Listen for close requests and close the active modal
    this.modalCommService.closeRequested.subscribe(() => {
      if (this.activeModal) this.activeModal.close();
    });
  }

  openModalPopup(content: any) {
    // Store a reference to the opened modal
    this.activeModal = this.modalPopup.open(content);
  }
}

4. Update SigninComponent's Button:

<button (click)="onCloseClick()">Close Modal</button>

Either approach will work—direct input binding is ideal for this specific use case, while the service method offers more flexibility for complex apps.

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