Question

我正在尝试一些有角度的概念，并在路上遇到了第一个碰撞..

我有一个websocket，用于传递带有传感器值的消息。这些值采用json对象的形式：

{
 "sensorId" : "1",
 "sensorType" : "2",
 "sensorValue" : "10.1"
}

由于我无法控制这些内容何时进入，因此还有一个Web服务，可用于查询特定传感器中最后看到的值，这也会返回如上所述的对象。

现在的问题是，我应该如何在我的角度组件/服务中使用它？我有一个仪表板，我想在仪表板的不同部分显示各个传感器值。我做了一个sensor.component.ts，如：

import { Component, Input } from '@angular/core';
import { Sensor } from './sensor';
import { SensorService } from './sensor.service';

@Component({
    selector : 'sensor',
    template : `
        <div class="sensor s{{size}}">
            <div class="value"><span>{{value|number : '1.2-2'}}</span></div>
            <div class="label">{{label}} ({{unit}})</div>
        </div>`
})

export class SensorComponent {
    @Input() id : number;
    @Input() type : number = 2;
    @Input() label : string = "N/A";
    @Input() size : number = 4;
    @Input() unit : string = "N/A";
    value : number = 0;
    errorMessage : any;
    _sensorService : SensorService;
    constructor (private sensorService : SensorService) {
        this._sensorService = sensorService;
    }

    ngOnInit() {
        this._sensorService.getSensor(this.id, this.type).subscribe(val => this.value = val, error => this.errorMessage = <any>error);
    }
}

随附sensor.service.ts：

import { Injectable } from '@angular/core';
import { Http, Response} from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';

@Injectable()
export class SensorService {
    private sensorUrl = "https://xxx/node/environment";
    constructor (private http: Http) {}

    getSensor(id:number, type:number) : Observable<number> {
        let url = this.sensorUrl + '?node=' + id.toString() + "&subType=" + type.toString();
        return this.http.get(url)
                        .map(this.extractData)
                        .catch(this.handleError);
    }

    private extractData(res:Response) {
        let body = res.json();
        return body.data || 0;
    }

    private handleError (error: Response | any) {
        let errMsg : string;
        if (error instanceof Response) {
            const body = error.json() || '';
            const err= body.error || JSON.stringify(body);
            errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
        } else {
            errMsg = error.message ? error.message : error.toString();
        }

        console.error(errMsg);
        return Observable.throw(errMsg);
    }
}

以上只是我查询的网络服务，但我不确定这是否是正确的方法，该服务在页面上被多次调用，每次都请求不同的传感器。

另外，我应该如何继续添加websocket监听器，以便在我的应用中获得即时传感器值？

带有任意传感器数据的angular2组件的最佳实践

0 个答案: