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并定义相同的变量tick：

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

Answer 1

您可以考虑使用tick observable从服务中共享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}}

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

1 个答案: