サービス変数をコンポーネントにバインドする方法角度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

サービスからの可変値tickを共有することが考えられます。Subjectを使用してください。それを観測可能にすることによって、それからそれのティックの値をアンラップしてそれを購読する必要はありません。 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}}