如何將組件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}}