Typescript 如何在angular9中添加新数据后重新加载组件

Typescript 如何在angular9中添加新数据后重新加载组件,typescript,angular9,Typescript,Angular9,我有一个组件是第一次加载的。添加新数据时,我希望重新加载组件。有人能帮我在angular9怎么做吗 如果我使用路由使用策略,它将重新加载组件,但下次将无法单击按钮。我用一个示例回答您,在本例中,您希望添加一个设备 adddevice.component.html <form [formGroup]="deviceadd" (ngSubmit)="adddevice()" class="was-validated" > &

我有一个组件是第一次加载的。添加新数据时,我希望重新加载组件。有人能帮我在angular9怎么做吗


如果我使用
路由使用策略
,它将重新加载组件,但下次将无法单击按钮。

我用一个示例回答您,在本例中,您希望添加一个设备

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;
          }

       }
     )

  }