如何將服務變量與組件Angular 2綁定？

Question

我有一個變量： public tick:number; 在服役。

該服務已注入另一個服務Timer。 它的啟動方式如下：

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();
    }

}

問題：我需要訪問模板中的刻度變量：

{{tick}} 

我真的認為我也需要在組件中同時訂閱tick並定義相同的變量tick ：

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

Answer 1

您可以考慮使用“ Subject可觀察”從服務共享tick變量值。 通過使其可觀察，您無需訂閱它即可解包報價的價格。 您需要使用| async 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}}