在 Angular 9 中添加新数据后如何重新加载组件答案

【问题标题】：How to reload the component after adding new data in angular9在 Angular 9 中添加新数据后如何重新加载组件
【发布时间】：2021-02-17 20:33:15
【问题描述】：

我有一个第一次加载的组件。当我添加新数据时，我想重新加载组件。谁能帮我在angular9中做到这一点？

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

【问题讨论】：

出于什么原因要重新加载组件？真的想不出一个适用的用例。也许 ngOnChanges 就足够了？

标签： typescript angular9

【解决方案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'函数会重新加载到组件中。

【讨论】：