Сервисная переменная Angular 5 не определена - PullRequest
Новая
       46

Сервисная переменная Angular 5 не определена

0 голосов
/ 06 июня 2018

Используя Angular 5, у меня есть 2 компонента и общий сервис, через который я хочу передавать данные из одного компонента в другой.

Я подписываюсь на переменную в oninit моего принимающего компонента и пытаюсь console.log результата, но он всегда отображается как undefined.

Компонент, который делает начальный вызов сервисной функции _quoteSummaryService.setSelectedPlan() вызывается с помощью нажатия кнопки HTML selectPlan(), и переданный объект имеет вид , а не , отображаемый как undefined.

Я даже могу console.log объекта в функции службыи это также не undefined.Это только undefined, когда я вызываю console.log для функции oninit принимающих компонентов, после подписки.

Переменная selectedPlan отображается как undefined при вставке в HTML принимающих компонентов как {{ selectedPlan? }}.

quote-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

  • Добавлениеa Getter в принимающий компонент и пытается получить доступ к переменной напрямую из сервиса.

  • Асинхронный канал в HTML

  • В основном все, что упомянуто вответ в на этот вопрос

  • Попытка подписать переменную в отправляющем компоненте, чтобы посмотреть, будет ли это что-то делать

1 Ответ

0 голосов
/ 06 июня 2018

JavaScript и вместе с ним TypeScript является асинхронным языком.Когда вы подписываетесь на что-то, текущий поток функций продолжается, и подписанная функция вызывается только после того, как наблюдаемое излучает.Это после 1001 *.

Измените свой код на этот, и вы получите то, что ожидаете: 

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

Вы можете добавить дополнительные console.log до и после подписки, вы увидите, что они регистрируются довызывается подписанная функция.

Даже если Observable может быть синхронизирован, всегда лучше никогда не доверять этому.

...