Question

我在提供程序中有一个Observable.timer，我将其导入特定页面。当计时器结束时，如何在页面内而不是提供程序中调用函数？

我现在正在做的是尝试使用.finally(() => this.endT())从提供者结束时返回一个值，但它不起作用

页

  import { TimerProvider } from '../../providers/timer/timer';

  endTimer() {
    console.log('timer ended');
  }

  newTimer() {
    this.countDown = this.timerProvider.newTimer();
    if(this.countDown == 'timer complete'){
      this.endTimer();
    }
  }

PROVIDER

  countDown: any;
  counter = 1*100;
  tick = 1000;

  constructor(public http: HttpClient) {
    //console.log('Hello TimerProvider Provider');
  }

  newTimer() {
     return Observable.timer(0, this.tick).take(this.counter)
     .map(() => --this.counter).finally(() => this.endT());
  }

  endT() {
    return 'timer complete';
  }

Answer 1

之前我遇到过这个问题。在JavaScript / Typescript中有一个简单的解决方案：回调函数

JavaScript允许您将函数传递给另一个函数，如下所示：

您的信息页

myCallback() {
    console.log('finished');
}

myFunction() {
    // i'm calling my other function right here
    anotherFunction(myCallback);
}

您的提供商

anotherFunction(callback) {
    // check if a callback is passed
    if (callback) {
        // execute your callback function whenever you want
        callback();
    }
}

您甚至可以为回调函数提供数据。您可以从Promises了解这个概念。

Answer 2

一种方法是在提供程序中使用EventEmitter，它会在计时器结束时发出一些内容。在使用它的组件中，您订阅它。这是使用反应模式编写Angular应用程序时的常见模式。

//provider
public timerEvent = new EventEmitter();
//...
newTimer() {
  Observable.timer(0, this.tick).take(this.counter)
  .map(() => --this.counter)
  .finally(() => this.timerEvent.emit(null));
}

//component
newTimer() {
  this.timerProvider.timerEvent.subscribe( () => {
    //will be called when the timer from the providers ends
  });
  this.timerProvider.newTimer();
}

从Ionic 2中的Provider调用页面函数

2 个答案: