Question

我有一个ProfileImageComponent，当单击它时，它会发出与使用我的UserProfileService服务相关联的用户对象。看到以下代码：

export class ProfileImageComponent {

  @Input() user;

  constructor(private userProfileService: UserProfileService, private sidebarService: SidebarService, private storageService: StorageService, private route: Router) { }

  openUserProfile() {
    // mobile
    if(window.innerWidth < 768) {
      this.route.navigate([`/user-profile/${this.user.pk}/`]);
      this.userProfileService.openUserProfile('view', this.user);
    } else {
      // tablet and above
      let loggedInUserPk = JSON.parse(this.storageService.getItem('User'))['pk'];
      let action = this.user['pk'] === loggedInUserPk ? 'edit' : 'view';

      if(!this.sidebarService.sidebarOpened) {
        this.userProfileService.openUserProfile(action, this.user);
        this.sidebarService.openSidebar();
      } else {
        this.sidebarService.closeSidebar();
      }
    }
}

上面的解释：

在移动设备上，如果窗口小于768像素，我将为用户配置文件指定一个特定的路由URL。路由后的行发出一个动作，并与用户对象相关联。

在平板电脑及更高版本上，我们改为打开不需要更改路线的侧边栏-它会发出值并打开侧边栏。

预订发出的值的UserProfileComponent 会收到该值，而不管屏幕如何。这是它的OnInit：

  ngOnInit() {
    this.userProfileSubscription = this.userProfileService.userProfile$
      .subscribe((profile) => {
        this.canEditProfile = profile['action'] === 'edit' ? true : false;
        this.user = profile['user'];
        this.cdr.markForCheck();
      });
  }

在我的HTML中，我只想在此阶段显示数据：

<div id="user-profile">
  <p>User : {{ user | json }}</p>
</div>

问题： 除非我单击两次，否则数据不会显示在移动设备上，即使数据确实已经到达并且模型正在更新也是如此。

我试图将其标记为进行更改检测，但是没有用（this.cdr.markForCheck();）

我还尝试了将| async管道添加到HTML中的用户对象，但是它也没有改变。

我在做什么错了？

编辑

UserProfileService：

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';

@Injectable()
export class UserProfileService {

  private userProfileSource = new Subject<any>();
  userProfile$ = this.userProfileSource.asObservable();

  constructor() { }

  openUserProfile(action, user) {
    this.userProfileSource.next({ action: action, user: user });
  }

}

Answer 1

Router.navigate是异步的。问题可能是您发出了数据（通过{{1}中的this.userProfileService.openUserProfile('view', this.user)之前的OnInit。

您可以在UserProfileComponent中使用BehaviorSubject，以重播userProfileService期间发出的最后一个值。

数据更改时DOM不更新-Angular 5

1 个答案: