Question

使用Angular 5，我有2个组件和一个共享服务，我希望将数据从一个组件传递到另一个组件。

我订阅了我的接收组件中的变量oninit并尝试console.log结果，但它始终显示为undefined。

通过HTML按钮点击_quoteSummaryService.setSelectedPlan()调用初始服务函数调用selectPlan()的组件，并且传入的对象不显示为undefined。

我甚至可以在服务函数中控制对象.log它也不是undefined。在订阅后，我在接收组件oninit函数上调用console.log时，它只有undefined。

变量selectedPlan在作为undefined插入接收组件HTML时显示为{{ selectedPlan? }}。

引号summary.service.ts ：

import { Injectable } from '@angular/core';
import { Subject }    from 'rxjs/Subject';
import { Quote } from '../models/quote-response.model';

@Injectable()
export class QuoteSummaryService {

    constructor(){}

    private _quoteSelectedPlanSource = new Subject<Quote>();
    public quoteSelectedPlan = this._quoteSelectedPlanSource.asObservable();

    setSelectedPlan(selectedPlan:Quote) {
        this._quoteSelectedPlanSource.next(selectedPlan);
    }
}

quote-select-plan.component.ts :(进行服务调用的组件）

export class QuoteSelectPlanComponent implements OnInit {
  constructor(private _quoteSummaryService:QuoteSummaryService, private _router: Router) {}

  selectPlan(selectedPlan) {
    this._quoteSummaryService.setSelectedPlan(selectedPlan);
    if (selectedPlan !== undefined) {
      this._router.navigateByUrl('/quote/details/assumptions');
    }
  }
}

quote-summary.component.ts :(订阅该变量但显示为未定义的组件）

export class QuoteSummaryComponent implements OnInit {
  constructor(private _quoteSummaryService:QuoteSummaryService) { }

  public selectedPlan: Quote;

  ngOnInit() {
    this._quoteSummaryService.quoteSelectedPlan.subscribe(plan => { this.selectedPlan = plan });
    console.log(this.selectedPlan) //showing as undefined
  }
}

我现在有点难过了。以下列出了我尝试过的无效工作的清单。我觉得我错过了一些简单的事情。

将服务中的变量来源从类型Subject更改为BehaviorSubject
将Getter添加到接收组件并尝试直接从服务访问变量。
HTML中的异步管道
基本上是Dependencies
尝试订阅发送组件中的变量以查看是否会执行任何操作

Answer 1

JavaScript及其使用TypeScript是一种异步语言。当您订阅某些内容时，当前的函数流将继续，并且只有在observable发出后才会调用订阅的函数。这是 - console.log之后。

将您的代码更改为此，您就可以获得所期望的内容：

ngOnInit() {
  this._quoteSummaryService.quoteSelectedPlan.subscribe(plan => { 
    this.selectedPlan = plan;
    console.log(this.selectedPlan);
  });
}

您可以在订阅之前和之后添加其他console.log，您将看到在调用订阅函数之前记录这些{。}}。

即使Observable可以同步，但最好永远不要相信它。

Angular 5服务变量未定义

1 个答案: