Question

我正在进行电影聊天，我想在我的消息上添加时间戳（＃minutes before）。我听说在组件文件中使用繁重的函数是个坏主意，所以我想将它移动到服务文件中。

现在，我想每隔60秒将数据从服务文件中的startTimeCalculations函数返回到我的组件，但我不知道怎么做？谁能帮我？

组件文件：这里我连接到this.messages[index].minutesAgo = this.movieChatService.startTimeCalculations(index);行上的函数目标是更改minutesAgo属性，但我不知道如何从服务文件中的函数接收数据

ngOnInit(){
        this.fullName = localStorage.getItem('fullName');
        this.url = 'ws://localhost:3185';
        this.movieChatService.createObservableSocket(this.url)
            .subscribe(obj => {
                let index = this.messages.length;
                this.messages.push(obj);
                this.movieChatElem.scrollTop = this.movieChatElem.scrollHeight - this.movieChatElem.clientHeight;
                this.messages[index].minutesAgo = this.movieChatService.startTimeCalculations()
                },
                err => console.log(err),
                () => console.log('The observable stream, is complete'));
    }

服务文件代码：我希望此代码将数据发送回组件文件

startTimeCalculations(index){
        setInterval(() => {
            // here I would like to send data back to the component every minute
        }, 60000);
    }

Answer 1

查看Observable.interval

https://www.learnrxjs.io/operators/creation/interval.html

基本上在您startTimeCalculation()中调用Obervable.interval，传入您想要的时间（在您的情况下为60,000），当您在组件中订阅它时，它将听取每分钟收到的值。 / p>

Component.ts

this.service.startTimeCalculation().subscribe(data => {
  console.log(data) // will be called every minute.
})

编辑实施：

startTimeCalculation() {
        return Observable.interval(60000)
            .switchMap(() => {
               return //your data here....
    }

将数据从服务文件发送到组件

1 个答案: