如何将组件Angular 2绑定到服务变量？

Question

我有一个变量：public tick:number;服务。

该服务已注入另一个服务计时器。它推出了类似为：

class Service { 

constructor(public timer: TimerService) 

} 

public sendSmsExect(){ 
    // Main sending 
} 

public sendSms(){ 

    this.timer.run().subscribe((tick => { if(tick == 30) { sendSmsExect(); } })); 

} 

} 

组件：

class MyComponent { 

    public constructor(public service Service){} 

    public sendSms(){ 
     this.service.sendSms(); 
    } 

} 

问题：我需要访问模板打勾varaible：

{{tick}} 

我真的认为我需要在组件中同时订阅tick并定义相同的变量tick：

public sendSms(){ 
    this.service.sendSms().subscribe((tick) => this.tick = tick); 
} 

Answer 1

您可以考虑使用Subject可观察到的来自服务的变量值tick。通过使它可观察，你不需要订阅它，从它打开tick的值。您需要在HTML上使用| async管道，该管道将负责解包tick的值并将其显示在HTML上。

代码

//don't miss below import 
import { Subject } from 'rxjs/Subject'; 

class MyService { 
    tick: Subject <number>(); 
    constructor(public timer: TimerService) {} 

    sendSmsExect() { 
    // Main sending 
    } 
    tickObservable() { 
    return this.tick.asObservable(); 
    } 

    public sendSms() { 
    this.timer.run().subscribe(tick => { 
     this.tick.next(tick); 
     if (tick == 30) { 
     sendSmsExect(); 
     } 
    ); 
    } 
} 

组件

//don't miss below import 
import { Observable } from 'rxjs/Observable'; 

class MyComponent { 
    tick: Observable<number>(); 
    public constructor(public service: MyService){} 

    sendSms(){ 
     this.service.sendSms(); 
    } 
    ngOnInit(){ 
     this.tick = this.service.tickObservable(); 
    } 
} 

的Html

{{tick | async}}