我有一个第一次加载的组件。当我添加新数据时,我想重新加载该组件。谁能帮我在angular9中做到这一点?
如果我使用routeReUseStrategy
,它将重新加载组件,但下次将无法单击按钮。
答案 0 :(得分:0)
我以一个示例答复您,在此示例中,您想添加设备
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>
adddevice.component.ts
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;
}
}
)
}
有一点,您必须将showdevice()函数放置到adddevice()函数中,以便在用户添加设备时showdevice'function重新加载到组件中。