时间戳

首页 > 解决方案 > 使用 BehaviorSubject Angular 5 在两个组件之间共享对象的麻烦

angular - 使用 BehaviorSubject Angular 5 在两个组件之间共享对象的麻烦

问题描述

我正在尝试通过服务在两个组件之间共享一个对象。

该组件option-post.component旨在显示此对象或这些对象的数组。该组件option-post-choix.component用于选择要option-post.component显示的对象。我用来option-data.service在两个组件之间共享数据。

我可以看到我console.log('service recv', data)的option-data.service数据到达服务但option-post.component我可以看到console.log('recv',this.option_select)我只收到一个空数组。我也使用rxjs/BehaviorSubject因为option-post仅在服务发出数据后订阅。

这个逻辑真的受到这个stackoverflow问题和这个答案的启发，但我现在有点无能为力。我已经检查过我的服务是否只提供一次module.ts

我的问题是：为什么数组在option-post.component通过我的服务后是空的，而他不在？

选项-data.service.ts

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import {BehaviorSubject} from 'rxjs/BehaviorSubject';
import { Options } from './option-post-choix/option';

@Injectable()
export class OptionDataService {
  private getDataSubject: BehaviorSubject<Options[]> = new BehaviorSubject([]);
  getData$: Observable<Options[]> = this.getDataSubject.asObservable();

  constructor() {
  }

  getData(data) {
  console.log('service recv', data);
  this.getDataSubject.next(data);
 }
}

option-post-choix.component.ts

import { Options } from './option';
import { OptionDataService } from '../option-data.service';

@Component({
selector: 'app-option-post-choix',
templateUrl: './option-post-choix.component.html',
styleUrls: ['./option-post-choix.component.css']
})
export class OptionPostChoixComponent implements OnInit {

 // simulation data
 options_choix = [
  new Options(0, 'Option 1', 'texte option 1', 15),
  new Options(1, 'Option 2', 'texte option 2', 150),
  new Options(2, 'Option 3', 'texte option 3', 50)
 ];

 constructor(private location: Location) { }

 option_select: Array<Options> = [];
 private dataTrans: OptionDataService = new OptionDataService;

 onValidClicked() {
 this.dataTrans.getData(this.option_select);
 this.location.back();
 }

 addOpt(opt, check) {
  console.log('id ', opt.id, 'is', check);
  if (!check) {
   this.option_select.push(opt);
  } else {
   this.option_select.splice(this.option_select.findIndex(x => x.id === opt.id), 1);
  }
}

选项-post.component.ts

import { OptionDataService } from '../option-data.service';
import { Options } from '../option-post-choix/option';
import { Observable } from 'rxjs/Observable';


@Component({
selector: 'app-option-post',
templateUrl: './option-post.component.html',
styleUrls: ['./option-post.component.css']
})
export class OptionPostComponent implements OnInit {

 public option_select: Options[];

 constructor(private router: Router, private data: OptionDataService) {

 }

 ngOnInit() {
  this.data.getData$.subscribe(option_select =>
  this.option_select = option_select);
  console.log('recv', this.option_select); //empty array []

 }

 addOption() {
  this.router.navigate(['/home/optionPostChoix']);
 } 

}

option-post.component.html

<div class="element_liste">
      <div class="option_box"  *ngFor="let opt of options_select">
          {{opt.titre}}
          <div class="option_elem">
            {{opt.texte}}
          </div>
        </div>
  </div>

option.ts 是我声明Options要共享的对象的地方

export class Options {
constructor(
    public id: number,
    public titre: string,
    public texte: string,
    public prix: number
 ) {}
}

标签： angularrxjs

解决方案

感谢Nabin Kumar Khatiwada我的问题得到了解决：

option-post-choix.component 从改变

constructor(private location: Location){}

到

constructor(private location: Location, private dataTrans: OptionDataService) {}

并删除

private dataTrans: OptionDataService = new OptionDataService;

推荐阅读