使用BehaviorSubject Angular 5在两个组件之间共享对象时遇到麻烦 [英] trouble sharing object between two component using BehaviorSubject Angular 5

问题描述

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

I'm trying to share an object between two components through a service.

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

The component option-post.component is meant to display this object or an array of thoses objects. The component option-post-choix.component is used to select wich objects you want option-post.component to display. I use option-data.service to share the data between both components.

我可以通过 option-data.service 中的 console.log('service recv'，data)看到我的数据到达了服务，但是在 console.log('recv'，this.option_select)看到> option-post.component ，我只收到一个空数组.我还使用 rxjs/BehaviorSubject ，因为 option-post 仅在服务发出数据之后才进行订阅.

I can see with the console.log('service recv', data) in option-data.service that my data arrives to the service but in option-post.component i can see with console.log('recv',this.option_select) that i only receive an empty array. I also use rxjs/BehaviorSubject because option-post subscribe only after the data being emit by the service.

此逻辑的真正灵感来自此stackoverflow问题和此答案但我现在有点笨.我已经检查了我的服务是否仅在 module.ts

The logic is really inspired by this stackoverflow question and this answer but I'm a bit clueless right now. I've already check that my service is only provide one time in module.ts

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

My question is: why the array is empty in option-post.component after it pass through my service, where he is not ?

option-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);
  }
}

option-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 的地方

option.ts Is where I declare my object Options that I want to share

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

推荐答案

感谢 Nabin Kumar Khatiwada 我的问题是解决:

option-post-choix.component 中的更改来自

构造函数(私有位置:位置){}

到

构造函数(私有位置:位置，私有dataTrans:OptionDataService){}

然后删除

private dataTrans:OptionDataService =新的OptionDataService；

这篇关于使用BehaviorSubject Angular 5在两个组件之间共享对象时遇到麻烦的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！