Question

我有一个用Angular 7编写的Web门户，该门户具有一个配置文件页面，用户可以在其中编辑其帐户数据。整个门户网站的右上角还有一个帐户部分，其中显示了已登录用户的用户名（以及他们如何进行个人资料编辑）。我有一个下拉菜单，用于订阅核心身份验证处理程序中用户的更改，以便他们注销并登录其他人后，它可以正确更新，等等。但是，如果用户在配置文件页面上编辑其用户名，则不会更新在帐户下拉菜单中，直到他们注销并重新登录为止，因为它是在寻找用户的完整更改，而不仅仅是更改用户数据。

所以问题是我如何订阅当前用户属性的更改，以便在用户名更改时更新用户名显示？

Answer 1

您可以使用 observables ：

<form #f="ngForm">
  <input type="text" name="firstName" [(ngModel)]="user.firstName">
  <input type="text" name="sureName" [(ngModel)]="user.sureName">
</form>

@ViewChild('f') f;

ngAfterViewInit() {
  this.f.form.valueChanges.subscribe((change) => {
   console.log(change)
  })
}

您可以使用ngModelChange：

<input type="text" (ngModelChange)="doSomething($event)" [ngModel]="user.firstName">

doSomething(event) {
  console.log(event); // logs model value
}

或者您可以使用KeyValueDiffers：

import { KeyValueChanges, KeyValueDiffer, KeyValueDiffers } from '@angular/core';

export class User {
  firstName: string;
  sureName: string;
}

@Component({
  selector: 'my-app',
  templateUrl: `./app.component.html`
})
export class AppComponent {
  private customerDiffer: KeyValueDiffer<string, any>;
  private customer: Customer;

  constructor(private differs: KeyValueDiffers) {}

  ngOnInit(): void {
    this.user = new User();
    this.userDiffer = this.differs.find(this.user).create();
  }

  userChanged(changes: KeyValueChanges<string, any>) {
    console.log('changes');
    /* If you want to see details then use
      changes.forEachRemovedItem((record) => ...);
      changes.forEachAddedItem((record) => ...);
      changes.forEachChangedItem((record) => ...);
    */
  }

  ngDoCheck(): void {
      const changes = this.userDiffer.diff(this.customer);
      if (changes) {
        this.userChanged(changes);
      }
  }
}

角度检测对象属性更改

1 个答案: