Question

我有一个用户实体，其所有操作均由单个服务处理。我有2个组件-一个组件显示相关的用户属性并更改用户数据，另一个组件更改某些用户属性。

当前，我已使用该服务获取数据并执行操作。但是当组件更改用户数据时，如何检测其他组件的更改。

Answer 1

您应该在该服务中使用RxJS。只需为数据使用Subject类型，然后使用subscribe更改组件。它允许组件“监听”服务中数据状态的变化。

Answer 2

使用RxJS处理更改，假设您有一个用户模型：

export interface User {
  id: number;
  username: string;
}

然后在服务中，您应该处理模型并在每次使用RxJS Subject进行更改时通知：

@Injectable({
  providedIn: 'root'
})
export class UserService {
  private user$: Subject<any> = new Subject<any>();
  user = this.user$.asObservable();

  // Lets say you need to authenticate your user..
  authenticate(user: User) {
    // Authenticate your user here

    // Then notify all your components that the user changed
    this.user$.next(user);
  }
}

您现在可以在您的任何组件中收听用户的更改：

export class TestComponent implements OnInit {

  user: Observable<any>;

  constructor(public userService: UserService) {
  }

  ngOnInit() {
    this.user = this.userService.user;
  }
}

角度8：检测对属性的更改

2 个答案: