Angular 2 - 实现共享服务

Question

Angular 2 - 实现共享服务

3

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

错误信息：TypeError: Cannot read property 'next' of undefined 可能出了什么问题或者缺少某些内容吗？还有，在我的终端窗口中，我遇到了这个错误，但它并没有反映在我的浏览器控制台上：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)
} 
}

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

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) {

}

那么，这个简单组件为什么无法显示结果、添加新元素以及被观察呢？我以前从未实现过观察者模式。

- Marco Jr

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- micronyks · Accepted Answer

你的代码不够清晰，因此变得难以理解。我仍然尝试以这种方式帮助你。请检查并告诉我如果它不起作用。

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