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

Question

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

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

除了以下代码之外，我还尝试使用

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

这可能是因为 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

Answer 2

向服务器请求完成后，只需调用

window.location.reload();

，页面就会刷新