我在對話框組件中有一個 Angular 反應形式。對話框組件是從路由為“/mypage”的頁面組件打開的。我希望在提交表單時重新加載我的頁面，以便使用從表單發布到后端的資料重繪 頁面內的給定表格。
提交后 mypage 未重新加載，因此我看不到新發布的資料。
除了以下代碼之外，我還嘗試使用onSameUrlNavigation: 'reload'app-routing 模塊匯入，以及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 appearance="outline"
fxFlex>
<mat-label>Name</mat-label>
<mat-hint>Group Name</mat-hint>
<input matInput formControlName="groupname">
</mat-form-field>
<mat-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>
對話框組件.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)
}
uj5u.com熱心網友回復：
這可能是因為 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
uj5u.com熱心網友回復：
對服務器的請求完成后，只需呼叫window.location.reload();它就會重繪 你的頁面
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/469229.html