primeNG Angular - 动态对话框关闭后页面自动重新加载

Question

我正在构建一个表单组件，它是通过在我的页面上单击按钮创建的，它在一个动态对话框中创建。

表单提交后，表单更新到服务器，但是页面在添加'?'后立即重新加载。在 URL 结束时，我想阻止它发生。

我试过去掉父组件的onClose订阅也是一样的结果，重新加载前执行了onClose相关代码。由于订阅是在重新加载之前执行的，所以我无法再控制组件的设置。

angular 堆栈

primeng: ^13.1.0
@angular/...：~13.1.0 除了 @angular/cdk：^13.2.1

parent.component.html

<button
  type="button"
  pButton
  icon="pi pi-plus"
  class="p-button-success mx-1"
  label="New"
  (click)="onAddNewEntry()"
></button>

parent.component.ts

import { DialogService, DynamicDialogRef } from 'primeng/dynamicdialog';
import { ChildComponent } from './child-component';

@Component({
...
  providers: [DialogService]
})
export class ParentComponent implements OnInit, OnDestroy {
  constructor(
    private dialogService: DialogService
  ) {}

  ref: DynamicDialogRef = new DynamicDialogRef();

  ngOnInit(): void {
  }

  onAddNewEntry(): void {
    this.ref = this.dialogService.open(ChildComponent, {});
    this.ref.onClose.subscript(() => console.log('Hi'))
  }

  ngOnDestroy(): void {
    if (this.ref) {
      this.ref.close();
    }
  }
}

child.component.ts

import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
@Component({
  ...
})
export class ChildComponent implements OnInit {
  constructor(
    private messageService: MessageService,
    private ref: DynamicDialogRef,
    private config: DynamicDialogConfig
  ) {}

  newEntryForm: FormGroup = new FormGroup({});

  ngOnInit(): void {
    this.newDeliverForm = new FormGroup({
      ...
    });
  }

  onSubmitNew() {
    //Handling
    this.ref.close(newDeliver);
  }
}

app-routing.module.ts

const routes: Routes = [
  {
    path: 'config',
    children: [
      { path: 'parent', component: ParentComponent },
    ],
  },
];

Answer 1

是因为子组件的按钮默认类型是submit，所以提交了子组件的表单并进行了查询。在子组件表单中添加type="button"后问题解决

<form [formGroup]="newDeliverForm">
  <!-- The form inputs -->
  <button
    *ngIf="!isEditMode"
    pButton
    type="button"
    label="Add"
    (click)="onSubmitNew()"
    icon="pi pi-plus"
    [disabled]="newDeliverForm.invalid"
  ></button>
</form>

primeNG Angular - 动态对话框关闭后页面自动重新加载

primeNG Angular - Page auto reload after dynamic dialog closes

angular

typescript

frontend

primeng