Question

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

<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>

我有一个带有表单和按钮的子组件（应用程序登录）：

<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';
    } ...
  }
}

Answer 1

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

(close)="onModalClose()"

然后在打字稿中发出该事件：

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

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

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

(close)="onClose()"

并在打字稿中隐藏模态：

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

其中的showModal用于确定是否应打开模式。

从子内部组件关闭模态

1 个答案: