Question

我有一个日期范围，我希望在不同组件之间共享所选日期，而无需在所有组件中重复代码

所以我用这种方式构建了我的应用程序

<app-date-range /> //date range component
<router-outlet></router-outlet>

我还创建了一个我在app模块提供商中添加的活动服务

@Injectable()
export class ReportsEventService {

 public maininputrange = new Subject();
 constructor() { }

 maininputrangeemit(data:any){
   this.maininputrange.next({type:"mainputrange", data:data});
 }

}

在我的日期范围组件中，我会像这样发出

  constructor(
   private _reportEventService:ReportsEventService
  ){ }

  dateRangeChanged(data){
    ...other implementations
    this._reportEventService.maininputrangeemit(this.mainInput);
  }

当我访问另一个组件以访问init上发出的数据时，我想要这样做。

  mainInput:any;
   constructor(
      private _reportsEvenService:ReportsEventService
    ) {
    _reportsEvenService.maininputrange.subscribe(
       (data)=>{
       console.log("receiving values"); //called many times
       this.mainInput = data;
      }
     )
   }

 ngOnInit() {
   console.log("maininput value is");
   console.log(this.mainInput); //always undefined

 }

我哪里出错了，我的实施可能吗？

Answer 1

如果您仍想知道出了什么问题，那么就是这样。在你ReportsEventService中，你只有一个setter方法，你没有getter方法来返回值。

＆＃13;

@Injectable()
export class ReportsEventService {

  public maininputrange = new Subject();
  constructor() {}

  setmaininputrangeemit(data: any) {
    this.maininputrange.next({
      type: "mainputrange",
      data: data
    });
  }

  getmaininputrangeemit(): Observalble < any > {
    return this.maininputrange.asObservable;
  }

}

＆＃13;

mainInput: any;
constructor(
  private _reportsEvenService: ReportsEventService
) {
  _reportsEvenService.getmaininputrange.subscribe(
    (data) => {
      console.log("receiving values"); //called many times
      this.mainInput = data;
    }
  )
}

ngOnInit() {
  console.log("maininput value is");
  console.log(this.mainInput); //always undefined

}

＆＃13;

Angular2使用服务将数据传递给不同的组件

1 个答案: