Question

我正在使用Angular Material表构建我的第一个Angular 5应用程序在使用httpClient发布新用户之后，我只是对服务器执行一个新的GET http调用并重新填充Angular Material表，工作得很好。

但我有第二个组件显示相同的数据（用户），但有轻微的不同信息，也使用材料表来显示数据。

我的问题是我不知道如何刷新第二个组件。目前，如果我刷新页面，它只会更新第二个表...

我想对其他组件实现相同的方法，只需重新执行对API的调用，以便表立即更新。

目前，overview.component.ts进行API调用并在概览模板中绑定用户，并在user.component.ts中使用@Input() ...

user.overview.component.html

<app-second> [(users)]="users"</app-second>
<app-users> [(users)]="users"</app-users>

user.component.ts

export class UserComponent implements OnChanges {
   @Input() users: UserDto[];
   displayedColumns = ['name', 'age'];
   dataSource = new MatTableDataSource<UserDto>();

   constructor(private _dialog: MatDialog, private _userService: UserService)

   ngOnChanges() {
     this.dataSource.data = this.users;
   }

   loadSites() {
      this._userService.getUsers("../api/customers/")
         .subscribe((users: UserDto[]) => {
         this.users = users
         this.dataSource.data = this.users;
      })
   }

   openCreateUserDialog() {
      let dialogRef = this._dialog.open(AddUserComponent, {
      height: 'auto',
      width: '500px',
      disableClose: true
   })
   dialogRef.afterClosed().subscribe(result => {
   if (result === "cancel") {
      return;
   } else {
      this.loadUsers();
   }
})
}
}

second.component.ts

export class SecondComponent implements OnChanges {
   @Input() users: UserDto[];
   displayedColumns = ['is-approved', 'alias'];
   dataSource = new MatTableDataSource<UserDto>(this.users);

   constructor(private _dialog: MatDialog, private _userService: UserService){}

   ngOnChanges() {
      this.dataSource.data = this.users;
   }

基本上我只需要知道如何使用新的api调用更新第二个组件和模板/视图，我不需要其他技术来完成这项任务。

Answer 1

这种情况正在发生，因为您在app-users上调用API。这个应用程序用户在创建app-second后调用。这就是你没有在第一次加载时看到数据的原因。

在第一个组件上实现此调用API或重新排序组件，如下所示。

<app-users> [(users)]="users"</app-users>
<app-second> [(users)]="users"</app-second>

Answer 2

您不必初始化输入

将API调用移动到父级，并将用户作为输入提供子组件，就像您希望的那样。 [users]="users"（不需要（）双向数据绑定）

将此内容放在overview.component.ts

中

   loadSites() {
      this._userService.getUsers("../api/customers/")
         .subscribe((users: UserDto[]) => {
         this.users = users
         this.dataSource.data = this.users;
      })

Angular 5，如何刷新兄弟组件？

2 个答案: