时间戳

首页 > 解决方案 > 路由器导航和模式关闭

html - 路由器导航和模式关闭

问题描述

我在 Angular 项目的 2 个独立组件中使用表单组件。当用户选择“保存”时，如果它位于其中一个组件中，我希望我的 onSubmit 函数关闭模式，或者如果它在另一个组件中，则使用路由器链接。

我目前有我的 onSubmit 函数来完成路由器链接，如下所示：

async onSubmit() {
  this.router.navigate(['/home']);
}

但我也希望这包括关闭模式并且当用户在不同的组件中时不导航。

<div class="modal-body">
    <app-add-form></app-drug-audit-add-form>
</div>

标签： htmlangulartypescript

解决方案

我使用了表单处理程序并将其链接到函数。

HTML

<app-add-form (saveFormHandler)="onSave()"></app-add-form>

TS（第一个文件）

@Output()
saveFormHandler = new EventEmitter();

onSubmit() {
  this.saveFormHandler.emit();
  this.saveFormHandler2.emit();
}

TS（第二个文件）

onSave() {
  this.router.navigate(['/drug-audit']);
}

TS（第三个文件）

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

推荐阅读