从子内部组件关闭模态答案

【问题标题】：Close modal from child inner component从子内部组件关闭模态
【发布时间】：2021-11-20 00:11:09
【问题描述】：

我有一个标题组件，其中包含点击触发的模式窗口

<a (click)="open(content)" class="in">Sign in</a>
<ng-template #content let-modal>
  <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <app-login></app-login>
  </div>
</ng-template>

我有一个带有表单和按钮的子组件（app-login）：

<button [disabled]="loading" class="btn btn-primary">
    <span *ngIf="loading" class="spinner-border spinner-border-sm mr-1"></span>
    Login
</button>

我的问题是，一旦我登录，模式仍然打开。我正在为这个应用程序使用 ng bootstrap。

这里是 LoginComponent ts 文件。此类允许构建和验证表单的字段并进行重定向：

export class LoginComponent implements OnInit {
   // ... variables declarations

  constructor(
    private formBuilder: FormBuilder,
    private route: ActivatedRoute,
    private router: Router,
    private authenticationService: AuthenticationService
  ) {
    if (this.authenticationService.currentUserValue) {
      this.router.navigate(['/']);
    }
  }

  get f() { return this.loginForm.controls; }

  onSubmit() {
    ...
  }
}

这里是我打开模态的标题组件。它包含 2 个方法：

export class HeaderComponent implements OnInit {
   // ... variables declarations    
  constructor(private modalService: NgbModal) {}

  open(content) {
    this.modalService.open(content, {ariaLabelledBy: 'modal-basic-title'}).result.then((result) => {
      this.closeResult = `Closed with: ${result}`;
    }, (reason) => {
      this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
    });
  }    
  private getDismissReason(reason: any): string {
    if (reason === ModalDismissReasons.ESC) {
      return 'by pressing ESC';
    } ...
  }
}

【问题讨论】：

你也可以添加 ts 文件吗？因为 ng bootstrap 有更多的方法来打开/关闭模态

标签： angular

【解决方案1】：

在子组件中，处理ng-bootstrap（关闭）事件：

(close)="onModalClose()"

并在打字稿中发出该事件：

close: EventEmitter<void> = new EventEmitter<void>();

onModalClose(): void {
  this.close.emit();
}

然后在你的父母中处理孩子的关闭事件：

(close)="onClose()"

并在你的打字稿中隐藏模式：

onClose(): void {
  this.showModal = false;
}

其中 showModal 用于确定模态是否应该打开。

【讨论】：

【解决方案2】：

这一行 close: EventEmitter<void> = new EventEmitter<void>();

应该是 @Output() close: EventEmitter<void> = new EventEmitter<void>();

【讨论】：