当我导航到打开的同一个url而不更改路由或查询参数时，如何在Angular 2+中重新初始化我的组件

Question

我有一个左侧导航窗格，其中有一个"添加项目"链接，该链接将我带到用于添加项目的表单。

我的路线是这样的：

{ path: 'additem', component: AddItemComponent, canActivate: [AuthGuard], data: {title: 'Add Item'} }

用户成功保存项目后，我希望在禁用保存按钮的情况下保持在同一页面上。但是，当用户再次单击左侧导航中的Add Item链接时，我希望重新初始化我的组件。如果当前视图是导航到的视图，那么ngOnInit方法不会被调用，我该如何做到这一点？我无法订阅查询或路由参数的更改，因为我没有查询或路由的参数。

Answer 1

如果您正在为表单使用formbuilder，

在您的html中，使用disabled属性禁用按钮

<form [formGroup]="offerForm" (ngSubmit)="addMyOffer(offerForm.value)">
<input type="text" formControlName="myOffer">
<button type="submit" [disabled]="!offerForm.valid">
<span>Add</span>
</button>          
</form>

在您的组件中，保存数据后，重置表格以添加新的报价

import { FormBuilder, FormGroup, Validators,FormControl } from '@angular/forms';
export class formComponent{
private offerForm:FormGroup;
constructor(private formBuilder: FormBuilder){
this.offerForm = this.formBuilder.group({
'myOffer' :['',Validators.required],
});
}

private addMyOffer(obj:any){
//code for saving data      
this.offerForm.reset(); // resets the form to add new offer
}
}