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

Question

我有一个第一次加载的组件。当我添加新数据时，我想要重新加载组件。有没有人可以教我如何在angular9中做到这一点？

如果我使用routeReUseStrategy，它会重新加载组件，但下一次将无法单击按钮。

Answer 1

我用一个示例回答您，在这个示例中，您想要添加一个设备

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()函数会在组件中重新加载。