在其他组件子组件更改时刷新组件子组件

Question

我有两个从父组件调用的子组件：

HTML

<app-profile-form [profile]="profile"></app-profile-form>
<app-profile-activity-list [profile]="profile"></app-profile-activity-list>

这很好用；现在在第二个组件中，我有一个活动日志列表，如下所示：

HTML

<app-datatable 
          [headers]="['#', 'New value','Old value','Description']" [dataLength]="datalength"
          [data]="profileActivities"
           emptyTableMessage="No logs created">

           <tr body *ngFor="let profileActivity of profileActivities; index as i">
            <td scope="row">{{ i + 1 }}</td>
            <td>{{profileActivity.newValue}}</td>
            <td>{{profileActivity.oldValue}}</td>
            <td>{{profileActivity.description}}</td>
           </tr>
           </app-datatable>

TS:

export class ProfileActivityListComponent implements OnInit {
  @Input() profile: ProfileModel;
   profileActivities: ProfileActivity[];

    constructor(
        public apiService: ApiService,
      ) { }
    
      ngOnInit() {
    
        let profileActivityRequestModel = {
            profileId:  this.profile.id,
            ...this.pagination
        }
        this.profileRequest =  profileActivityRequestModel;
    
    
        this.apiService.profileActivityService.getPagedFilteredList(this.profileRequest).subscribe((result) => {
            this.profileActivities = result.resourceModel;
            this.datalength = this.profileActivities.length;
            let totalPages = result.total ? Math.ceil(result.total / result.limit) : 1;
            this.pagination = {
              ...this.pagination,
              total: result.total,
              totalPages: totalPages,
              page: result.offset + 1
            }
          });
      }

最后，在第一个子模型中，我有一个表单，在一天的最后，调用 API 并返回如下响应：

TS

 submitForm() {
     this.store.dispatch(new ProfileActions.AddProfile(newProfile));
   }

对 API 的最后一次调用将第二个子组件应检索的数据插入到数据库中。但在我刷新页面之前，更改不会反映出来。有没有办法在第一个组件提交后刷新第二个组件表信息？

Answer 1

您可以使用 @Output() 事件发射器和 @Viewchild() 装饰器来实现它，请按照以下步骤操作

将 @Output() 事件发射器定义到您的 app-profile-form.component.ts 文件中，如下所示

@Output() public dataSaved = new EventEmitter<boolean>();

/* Emit an event when data is get saved, from your profile-form component as below */
submitForm() {
  this.store.dispatch(new ProfileActions.AddProfile(newProfile));
  this.dataSaved.emit(true);
}

将事件绑定到您的父组件中，并将引用添加到您的 profile-activity-component 选择器中以供 viewchild 使用

<app-profile-form [profile]="profile" (dataSaved)="refreshActivityList($event)"></app-profile-form>
<app-profile-activity-list [profile]="profile" #refProfileActivity></app-profile-activity-list>

定义刷新活动列表()方法进入您的父组件并为您的配置文件活动组件创建@viewChild()

@ViewChild('refProfileActivity') refProfileActivity: ProfileActivityListComponent;

public refreshActivityList(event) {
  if (event) {
    this.refProfileActivity.getList();
  }
}

最后但同样重要的是，将您的 API 调用从 ngOnInit() 挂钩移动到任何特定函数 ProfileActivityList 组件 TS 文件中，如下所示

export class ProfileActivityListComponent implements OnInit {
  @Input() profile: ProfileModel;
  profileActivities: ProfileActivity[];

  constructor(public apiService: ApiService) {}

  ngOnInit() {
    this.getList();
  }

  public getList() {
    let profileActivityRequestModel = {
      profileId: this.profile.id,
      ...this.pagination,
    };
    this.profileRequest = profileActivityRequestModel;

    this.apiService.profileActivityService
      .getPagedFilteredList(this.profileRequest)
      .subscribe((result) => {
        this.profileActivities = result.resourceModel;
        this.datalength = this.profileActivities.length;
        let totalPages = result.total
          ? Math.ceil(result.total / result.limit)
          : 1;
        this.pagination = {
          ...this.pagination,
          total: result.total,
          totalPages: totalPages,
          page: result.offset + 1,
        };
      });
  }
}

谢谢！