Angular 2 - 共享服务的实现 [英] Angular 2 - Implementation of shared services

问题描述

我正在尝试实施我在 Stack Overflow 中找到的解决方案，但遇到了困难.我有一个服务和一个组件，但在实现上有些地方不正确.

错误:TypeError:无法读取未定义的属性next"可能有什么问题或遗漏了什么?还有什么遗漏的吗?同样在我的终端窗口上，我收到了这个错误，但它没有反映在我的浏览器控制台上:错误 TS1005: '=>' 预期.

import {Injectable} from 'angular2/core';从 'rxjs/Observable' 导入 {Observable}；从 'rxjs/Observer' 导入 {Observer}；@Injectable()导出类 GlobalService {数据:任何；dataChange: Observable;构造函数(){this.dataChange = new Observable((observer:Observer) {//这是 TS1005 错误.this.dataChangeObserver = 观察者；});}设置数据(数据:任何){this.data = 数据；this.dataChangeObserver.next(this.data);//关键错误的行(下一个)}}

这是使用服务的组件......(我只会放置相关的行)

import {GlobalService} from "../../../global.service";进口(...)@成分({提供者:[全球服务]，模板:`<p>{{myData}}<>/p><span (click)="addTag(1, 'test')">添加更多</span>`});导出类 MyComponent {添加标签(id，desc){this._global.setData({ attr: 'some value' });}}构造函数(私有_global:GlobalService){}

那么，让这个简单的组件显示结果并添加新元素并使其可观察有什么问题和/或缺失?我以前从未实现过 observable.

解决方案

您的代码不够清晰，因此变得难以理解.仍然试图以这种方式帮助你.检查并让我知道它是否不起作用.

<预><代码>...从angular2/core"导入 {Injectable,EventEmitter,Output}；@Injectable()导出类 GlobalService {数据:任何；@Output dataChangeObserver: EventEmitter=new EventEmitter();构造函数(){});设置数据(数据:任何){this.data = 数据；this.dataChangeObserver.emit(this.data);返回 this.dataChangeObserver;}}

<小时>

导出类 MyComponent {构造函数(私有_global:GlobalService){}添加标签(id，desc){this._global.setData({ attr: 'some value' }).subscribe((res)=>{this.myData=res},err=>console.log(err),//去掉点()=>console.log('recived data')//去掉点);}}

I'm trying to implement a solution I found right here in Stack Overflow, but facing difficulty. I've a service and a component and something is not correct on the implementation.

The error: TypeError: Cannot read property 'next' of undefined What could be wrong or missing ? Is there something more missing ? Also on my terminal window, I got this error, but it's not reflect on my browser console: error TS1005: '=>' expected.

import {Injectable} from 'angular2/core';
import {Observable} from 'rxjs/Observable';
import {Observer} from 'rxjs/Observer';
@Injectable()
export class GlobalService {
data: any;
dataChange: Observable<any>;
constructor() {
this.dataChange = new Observable((observer:Observer) { // this is the TS1005 error.
  this.dataChangeObserver = observer;
});
}
setData(data:any) {
this.data = data;
this.dataChangeObserver.next(this.data); //Line of the critical error (next)
} 
}

and this is the component that's consume the service....(I will place only the relevant lines)

import {GlobalService} from "../../../global.service";
import(...)
@Component({
    providers: [GlobalService],
template: `<p>{{myData}}<>/p><span (click)="addTag(1, 'test')">Add more</span>` 
});
export class MyComponent  {
    addTag (id,desc){
       this._global.setData({ attr: 'some value' });
    }
}
constructor(private _global: GlobalService) {

}

So, what's wrong and/or missing to make this simple component display results and add new elements and be observable ? I never implemented observables before.

解决方案

Your code is not so clear and so becomes hard to understand. Still tried to help you this way. Check and let me know if it doesn't work.

...
import {Injectable,EventEmitter,Output} from 'angular2/core';
@Injectable()
export class GlobalService {
data: any;    
@Output dataChangeObserver: EventEmitter=new EventEmitter();

  constructor() {
  });

  setData(data:any) {
    this.data = data;
    this.dataChangeObserver.emit(this.data); 
    return this.dataChangeObserver;
  } 
}

---

export class MyComponent  {
    constructor(private _global: GlobalService) {

     }

    addTag (id,desc){
       this._global.setData({ attr: 'some value' })
                 .subscribe((res)=>{this.myData=res},
                 err=>console.log(err),   //removed dot
                 ()=>console.log('recived data') //removed dot                    
                  );
     }
}

这篇关于Angular 2 - 共享服务的实现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！