angular - 在 Angular 中路由之间共享数据时如何避免 Observable 的痛苦？

Question

当我们希望在路由之间共享数据时，唯一可行的解​​决方案似乎是使用服务。由于我们希望数据在更新时在 View 中重新呈现，因此我们必须使用 BehaviorSubject .

所以，如果我错了，请纠正我，但一个简单的组件将如下所示:

@Component({
    selector: 'user-info',
    template: `
        {{($user | async).firstName}}
        <button (click)="updateName()"></button>
    `
})
export class UserInfoComponent {

    private $user;
    private subscribe;

    constructor(private service: UserService) {
        this.user$ = this.service.get();
    }

    updateName() {
        this.subscribe = this.service.get().subscribe(user => 
            this.service.update({...user, firstName: 'new-name'})
        );
    }

    ngOnDestroy() {
        this.subscribe.unsubscribe();
    }
}

这听起来真的很令人沮丧，因为如果我们不使用路由器，我们可以用 <user-info [user]="user | async"></user-info> 调用组件。它会更干净:

@Component({
    selector: 'user-info',
    template: `
        {{user.lastName}}
        <button (click)="updateName()"></button>
    `
})
export class UserInfo2Component {

    @Input() user: User;

    constructor(private service: UserService) {}

    updateName() {
        this.service.update({...user, lastName: 'new-name'});
    }
}

所以我的问题是:为什么在路由之间共享数据如此困难？有没有我可能错过的更好的解决方案？

Answer 1

您的错误是在组件中处理更新逻辑，而不是在服务中。

尝试这样的事情:

用户服务

import { Component, Input } from '@angular/core';
import {BehaviorSubject} from 'rxjs/BehaviorSubject';

export class UserService {
  private user = new BehaviorSubject({
    firstName: 'Tomasz'
  })

  user$ = this.user.asObservable();

  update(user: any) {
    this.user.next({
      ...this.user.getValue(),
      ...user
    })
  }
}

app.component.ts

import { Component } from '@angular/core';
import {UserService} from './user.service';

@Component({
  selector: 'my-app',
  template: `
  <input (keydown.enter)="updateUser(input.value); input.value=''" #input>

  {{ user$ | async | json }}
  `,
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  user$;

  constructor(private userService: UserService) {
    this.user$ = this.userService.user$;
  }

  updateUser(firstName: string) {
    this.userService.update({ firstName });
  }
}

Live demo