从 Angular2 服务的订阅中获取延迟变量答案

【问题标题】：Getting deferred variable from subscription in Angular2 service从 Angular2 服务的订阅中获取延迟变量
【发布时间】：2016-08-24 23:18:52
【问题描述】：

所以，我有以下服务/组件：

dasboard.service.ts（摘录）

@Injectable()
export class DashboardService extends RestHelpers {
    private _Manager$: Subject<Manager> = new Subject();

    constructor(private http: Http) {
        super(http);

        this.get<Manager>(url).subscribe(result => {
            this._Manager$.next(result);
        }, error => this.errorMsg = error);
    }

    get manager$(): Observable<Manager> {
        return this.Manager$.asObservable();
    }
}

rental.service.ts（摘录）

@Injectable()
export class RentalService extends RestHelpers {
    constructor(private http: Http, private _dashboardService: DashboardService) {
        super(http);

        this._dashboardService.manager$.subscribe(r => {
            this._rentals = r.Rentals;
            this._rentals$.next(this._rentals);
        });
    }

    get rentals$(): Observable<{}> {
        return this._rentals$.asObservable();
    }

    findRental(id: string): Observable<Rental> {
        return this.rentals$.map((r: Rental) => r.find(rental => r.RentalId === id));
    }
}

rental-detail.component.ts（摘录）

export class RentalDetailsComponent implements OnInit {

    private rental: Rental;
    public title = "Rental";

    constructor(private _rentalService: RentalService, private route: ActivatedRoute, private router: Router) {
        this.rental = <Rental>{};
    }

    ngOnInit() {
        this.sub = this.route.params.subscribe(params => {
            let id = params['id'];

            if (id !== undefined) {
                this._rentalService.findRental(id).subscribe((rental) => {
                    this.rental = rental;
                    this.title = rental.RentalName; 
                });
            }
        });
    }
}

到构建组件时，该服务已经在另一个组件上调用过一次，当我想将它路由到细节时，我永远无法获得租金。在组件调用时，服务被启动（构造函数运行），但 subscribe 方法似乎什么也没产生，尽管第一次调用 subscribe 实际上正在工作。

调用顺序：

Dasboard Component --- Dashboard Service
|
+ Rental Dashboard Component --- Rental Service --- (depends on) Dashboard Service
  |
  + Rental Details Component --- Rental Service --- (depends on) Dashboard Service

出租组件都是仪表板组件上的子组件，通过路由器出口，因此它们不是直接组件。

我考虑过观察一个变量来等待订阅完成，我尝试使用 Promise，但它们从不返回订阅的值，这是我想出的最好的方法，但它不起作用。这是我第一次使用 rxjs 和 angular2，我无法解开这个结。非常感谢您的帮助。

package.json（摘录）

"@angular/common": "2.0.0-rc.5",
"@angular/compiler": "2.0.0-rc.5",
"@angular/core": "2.0.0-rc.5",
"@angular/http": "2.0.0-rc.5",
"@angular/router": "3.0.0-rc.1",
"@angular/router-deprecated": "2.0.0-rc.2",
"@angular/upgrade": "2.0.0-rc.5",
"angular2-in-memory-web-api": "0.0.15",
"core-js": "^2.4.0",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.6",
"systemjs": "0.19.27",
"zone.js": "^0.6.12"

【问题讨论】：

附加评论：我应该使用某种商店，因为许多组件正在重用这些服务吗？
我很不清楚您实际尝试完成什么。什么是Manager？你需要多久取一次？启动时或每次租赁搜索仅一次？
@GünterZöchbauer 我只是在开始时加载它。经理有客户、租赁等，我想将它们分成他们自己的服务，因为他们有自己的仪表板。

标签： angular rxjs angular2-routing observable angular2-services

【解决方案1】：

我认为将 RentalService 中的 observable 更改为

private _rentals$: Subject<Rental> = new BehaviorSubject();

应该做你想做的事

【讨论】：