Question

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

组件option-post.component用于显示此对象或thoses对象的数组。组件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仅在服务发出数据后才订阅。

逻辑真的受到this stackoverflow question和 this answer 的启发，但我现在有点无能为力。我已经检查过我的服务只在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);
 }
}

选项-后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']);
 } 

}

选项-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
 ) {}
}

Answer 1

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

option-post-choix.component中的更改从

constructor(private location: Location){}

到

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

并删除

private dataTrans: OptionDataService = new OptionDataService;

使用BehaviorSubject Angular 5在两个组件之间共享对象时遇到问题

1 个答案: