Typescript 如何在angular9中添加新数据后重新加载组件
我有一个组件是第一次加载的。添加新数据时,我希望重新加载组件。有人能帮我在angular9怎么做吗Typescript 如何在angular9中添加新数据后重新加载组件,typescript,angular9,Typescript,Angular9,我有一个组件是第一次加载的。添加新数据时,我希望重新加载组件。有人能帮我在angular9怎么做吗 如果我使用路由使用策略,它将重新加载组件,但下次将无法单击按钮。我用一个示例回答您,在本例中,您希望添加一个设备 adddevice.component.html <form [formGroup]="deviceadd" (ngSubmit)="adddevice()" class="was-validated" > &
如果我使用
路由使用策略
,它将重新加载组件,但下次将无法单击按钮。我用一个示例回答您,在本例中,您希望添加一个设备
adddevice.component.html
<form [formGroup]="deviceadd" (ngSubmit)="adddevice()" class="was-validated" >
<div class="form-group row">
<label class="col-sm-3 col-form-label" for="inpute1">device name</label>
<div class="col-sm-6">
<input type="text" class="form-control form-white" id="inpute1" [formControl]="devicetitle" required >
<div *ngIf="devicetitle.invalid && (devicetitle.dirty || devicetitle.touched) " class="alert alert-danger">
<div *ngIf="devicetitle.errors.required">
please inpute device name
</div>
</div>
</div>
</div>
<div>
<button type="submit" class="btndestorytb btn btn-primary ml-1 waves-effect waves-light save-category" [disabled]="!deviceadd.valid" >SUBMIT</button>
<button type="button" [hidden]="btnmsg" class="{{cus_class}}">{{msg}}</button>
</div>
</form>
有一点,您必须将showdevice()函数添加到adddevice()函数中,即当用户在组件中添加设备showdevice的函数重载时。为什么要重载组件?真的想不出适用于此的用例。也许ngOnChanges就足够了?
devicetitle = new FormControl('', [Validators.required,]);
deviceedite: FormGroup = this.builder.group({
edevicetitle: this.edevicetitle,
});
showdevice()
{
this.api.showdevices().subscribe(
(data) => {
if (data.status == 200) {
this.arrdevices = data.body;
}
},
(error) => {
if(error.status==500 )
{
this.msg=error.detail;
}
}
);
}
adddevice() {
this.api.adddevice(this.deviceadd.value).subscribe(
(data)=>
{
if(data.status==200)
{
this.cus_class="btn btn-outline-success waves-effect waves-light width-md";
this.btnmsg=false;
this.msg="add device success";
this.showdevices();
}
},
(err)=>
{
if(err.status==500 )
{
this.msg=err.error.detail;
}
}
)
}