Angular RC6 - 使用自己的数据创建可注入(inject)服务

标签 angular angular2-observables

我有一个数据模型(在应用程序中应该是单实例)

export class Computer {
    model: string;
    serial: string;
    completed: boolean = false;
}

我认为最好的方法是通过可注入(inject)服务将其归还。

@Injectable()
export class DataService {

    getComputer(): Observable<Computer> {
        let c = new Computer();
        c.model = 'Quite Good Computer 455';
        c.serial = '344-344-455-555';
        c.ompleted = true;
        ...
    }
}

它应该位于 CoreModule 中。

如何实现 DataService.getComputer() 返回 Observable ? c 在 ...

之前创建

编辑

在此getComputer()我需要模拟网络延迟的方法 - 将超时设置为 2 秒。以前我用的是Promise这个函数是:

getComputer(): Promise<Computer> {
    return new Promise<Computer>(resolve =>
        setTimeout(() => resolve(this.createComputer()), 2000) // 2 seconds
    );
}

private createComputer(): Computer {
    let c = new Computer();
    c.model = 'Quite Good Computer 455';
    c.serial = '344-344-455-555';
    c.ompleted = true;
    return c;
}

它是这样被消费的:

ngOnInit() {
    this.dataService.getComputer().then(
        data => this.computer = data
    );
}

现在我想把它翻译成 using Observables 然后放到核心模块。

在 Günter Zöchbauer 回答后我尝试关注

getComputer(): Observable<Computer> {
    let res = new BehaviorSubject<Computer>();
    return <Observable<Computer>>res.asObservable();
}

但 VSC 突出显示行 let res ...带有错误消息 [ts] Supplied parameters do not match any signature of call target. (alias) new BehaviorSubject<T>(_value: T): BehaviorSubject<T> .我导入了BehaviorSubject来自 rxjs/rx .

编辑

根据 Günter Zöchbauer 的另一条说明,我更改了服务等级代码

export class DataServiceMock {
    private computerObs: Observable<Computer>;
    constructor() {
        let s = new BehaviorSubject<Computer>();
        this.computerObs = s.asObservable(); 
    }  

    getComputer(): Observable<Computer> {
        return this.computerObs;
    }

现在提到的错误在这里:let s = new BehaviorSubject<Computer>(); .在这种情况下,我也不知道如何添加 Computer实例流式传输(使用 next() )延迟 2 秒 - 我会把它放在 ngInit 中.

最佳答案

getComputer(): Observable<Computer> {
    let c = new Computer();
    c.model = 'Quite Good Computer 455';
    c.serial = '344-344-455-555';
    c.ompleted = true;
    return Observable.of(c);
}

更新

private computer = new BehaviorSubject<Computer>();

computer$ = this.computer.asObservable();

// called when computer changes
updateComputer(Computer c) {
  this.computer.next(c);
}

调用者使用

this.dataService.computer$.subscribe(...)

关于Angular RC6 - 使用自己的数据创建可注入(inject)服务,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39327438/

相关文章:

Angular2 重用路由进行编辑/添加

javascript - 尝试向可观察对象内的对象添加属性

.net - RxJS/Rx.Net 可观察订阅与事件 - 性能/线程

javascript - 使用 zip 运行所有 Observables

javascript - 将 ng-content 传递给子组件

javascript - 来自已解析 Promise 的数据未在组件 View 中正确加载(Angular2、JavaScript)

javascript - Angular2 - RadioButtonState 没有按预期工作

angular - 如何使用 observables 在 angular2 中异步绑定(bind)下拉列表?

angular - 一种有条件地链接多个可观察对象的更简洁的方法

angular - 如何将值传递给需要类的函数