在对话框中提交反应式表单后重新加载页面

Question

我在对话框组件中有一个 Angular 响应式表单。对话框组件从路由为“/mypage”的页面组件打开。我希望在提交表单时重新加载我的页面，以便使用从表单发布到后端的数据刷新我页面内的给定 table。

提交后我的页面没有重新加载，所以我看不到新发布的数据。

除了以下代码，我尝试使用 onSameUrlNavigation: 'reload' 导入应用程序路由模块，然后 routerLink="/mypage" 导入表单的提交按钮，但它都没有重新加载 mypage。

还应考虑哪种其他方法？

dialog.component.html

<div mat-dialog-content>
    <form [formGroup]="newGroupForm" (ngSubmit)="onSaveNewGroup()">

        <div fxLayout="column" fxLayoutAlign="space-between space-between">

            <mat-form-field class="form-field" appearance="outline"
            fxFlex>
                <mat-label>Name</mat-label>
                <mat-hint>Group Name</mat-hint>
                <input matInput formControlName="groupname">
            </mat-form-field>

            <mat-form-field class="form-field" appearance="outline"
            fxFlex>
                <mat-label>Description</mat-label>
                <mat-hint>Group Description</mat-hint>
                <textarea matInput formControlName="groupdescription"></textarea>
            </mat-form-field>

        </div>
        
        <button mat-raised-button color="primary" mat-dialog-close type="submit">Save</button>
        
    </form>
</div>

dialog.component.ts

...
  export class NewGroupDialogComponent implements OnInit {

  constructor(private apiService: ApiService) {
    this.newGroupForm = new FormGroup({
      'groupname': new FormControl(null, [Validators.required]),
      'groupdescription': new FormControl(null, [Validators.required])
    });
  }

  ngOnInit(): void {
    
  }

  newGroupForm: FormGroup;

  onSaveNewGroup() {
    const body = {
      "name": this.newGroupForm.value.groupname,
      "description": this.newGroupForm.value.groupdescription
    }

    this.apiService.postGroup(body)
    .subscribe(group => {
      
    })
  }

}

mypage.component.html

...
                <button
                    mat-raised-button
                    color="primary"
                    (click)="onCreateGroup()">
                    New Group
                </button>

mypage.component.ts

  ...
  onCreateGroup() {
    let dialogConfig = new MatDialogConfig
    dialogConfig.height = "80vh"
    dialogConfig.width = "80vw"
    this.newGroupDialog.open(NewGroupDialogComponent, dialogConfig)
  }

Answer 1

向服务器请求完成后，调用window.location.reload();即可使您的页面刷新

Answer 2

这可能是因为 RouteReuseStrategy。

让我们尝试一种快速肮脏的方法来确保它是因为重用策略；将此添加到组件的 ngOnInit():

ngOnInit(): void {
  /* prevent angular from reusing the same route. */
  this._router.routeReuseStrategy.shouldReuseRoute = () => false;
}

如果有效，则实施您的自定义 RouteReuseStrategy 并将其添加到您的 module.ts 文件：

providers: [
    {
        provide: RouteReuseStrategy,
        useClass: CustomRoutingReuseStrategy
    }
]

更多信息请查看RouteReuseStrategy

在对话框中提交反应式表单后重新加载页面

Reload page after reactive form submission inside a dialog

forms

dialog

submit

reload

angular