Angular RC6 – 使用自己的数据创建可注射服务

2023年6月2日 187次阅读

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

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

我认为最好的方法是通过注射服务返回它.

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

现在我想将它转换为使用Observables,然后将其转换为inot核心模块.

在GünterZöchbauer回答之后我试着跟随

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

但是VSC突出显示行let res …带有错误消息[ts]提供的参数与调用目标的任何签名都不匹配. (别名)new BehaviorSubject< T>(_ value：T)：BehaviorSubject< T>.我从rxjs / rx导入了BehaviorSubject.

编辑

在GünterZö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>();.在这种情况下,我也不知道如何将计算机实例添加到流(使用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(...)
点赞