Angula2 将模板变量绑定到服务

Question

我试图简单地将 Angular2 中模板中的变量绑定到服务的变量。该服务应通过 http 加载数据，然后再次相应地更新模板中的视图（我假设更改检测和绑定也应该这样做）。但是我无法让它发挥作用。显示服务中变量的初始值。还执行 http 请求，恕我直言，再次设置变量。但是视图没有更新。

import {Component} from 'angular2/core';
import {HTTP_PROVIDERS, Response, Http} from 'angular2/http';

@Component({
    providers: []
})
export class AddressService{
    ipaddress: String='evaluating';
    constructor(private http:Http) {}
    getIp(){
        this.http.get('http://ip.jsontest.com/')
            .subscribe(
                data => this.processResponse(data.json()),
                err => this.logError(err)
            );
    }
    logError(err) {
        console.error('There was an error: ' + err);
    }
    processResponse(data){
        console.log(data.ip);
        this.ipaddress='data.ip';
    }
}

@Component({
    selector: 'address-app',
    template: '<div>your IP Address is:&nbsp;{{addressService.ipaddress}}</div>',
    providers: [AddressService]
})
export class App {
    constructor(private addressService: AddressService){
        this.addressService.getIp();
    }
}

使用简单的 boot.ts 引导应用程序

import {bootstrap}    from 'angular2/platform/browser'
import {HTTP_PROVIDERS} from 'angular2/http';
import {App} from 'app.ts'

bootstrap(App, [HTTP_PROVIDERS]);

我为此 http://plnkr.co/edit/75VVjEUSflbvh3oG8Kwk?p=preview 创建了一个 plunker，其中服务仅请求 IP，然后应更新显示 - 但它仍保持原始值（正在评估）。这在 Angular 1 中很简单直接，我不确定我在这里做错了什么才能在 Angular 2 中得到相同的结果。

Answer 1

您应该将 angular2-polyfills 添加到您的项目中（参见 this plunk）：

<script src="//code.angularjs.org/2.0.0-beta.0/angular2-polyfills.min.js"></script>

PS 请不要使用 @Component 服务装饰器。请改用 @Injectable。

Angula2 将模板变量绑定到服务

Angula2 bind template variable to service

angularjs-service

angular2-template

angular2-services

angular