Angular 2:使用Elasticsearch客户端绑定数据

Question

我正在尝试使用Angular 2和npm的官方elasticsearch.js客户端为Elasticsearch编写一个简单的web界面。

我创建了一个类似这样的服务：

import { Injectable } from '@angular/core';
import { Client } from 'elasticsearch';

@Injectable()
export class ElasticsearchService {

    private _client: Client;
    constructor() {
        if (!this._client) {
            this._connect();
        }
    };
    private _connect() {
        this._client = new Client({
            host: 'http://my-elasticsearch-host:9200',
            log: 'trace'
        });
    };
    isAvailable(): PromiseLike<String> {
        return this._client.ping({
            requestTimeout: Infinity
        });
    }
}

这似乎工作得很好。日志记录显示请求得到了正确的响应。

下面是我的组件：

import { OnInit, Component } from '@angular/core';
import { ElasticsearchService } from './services/elasticsearch.service';

@Component({
    selector: 'foo',
    templateUrl: './foo.component.html',
    providers: [ElasticsearchService]
})
export class TimeLineComponent implements OnInit {

    private status: String = 'not ok';
    constructor(private esService: ElasticsearchService) { } ;

    ngOnInit(): void {
        this.showStatus();
    }

    showStatus(): void {
        this.esService.isAvailable()
            .then( response => this.status = 'OK' );
    }

}

下面是模板：

status:{{status}}

我不明白为什么我的浏览器一直显示“不好”。这里我漏掉了什么？

Answer 1

我认为视图不刷新的原因是elasticsearch客户端使用了它自己的延迟/承诺实现，而Zone.js并没有采用它。

我找到了两种可能的解决方案：

1:设置组件变量后的Run change detection manually

2:替换客户端默认的defer方法。幸运的是，这很简单(我从elasticsearch.jquery.js那里借鉴了这个想法)

function defer() {
  let resolve, reject, promise;

  promise = new Promise((_resolve, _reject) => {
    resolve = _resolve;
    reject = _reject;
  });

  return { resolve, reject, promise };
}

this.client = new Client({
  host: 'http://my-elasticsearch-host:9200',
  log: 'trace',
  defer: defer
});

因为它使用的是标准的Promise类，所以Zone会正确地拾取它。

我还在测试defer()的这种简约的替代方法是否足够，但它可能需要额外的方法。如果有什么问题，我会更新的。