Angular 角度延迟、暂停并在停止位置重新启动_Angular

Angular 角度延迟、暂停并在停止位置重新启动

angular

Angular 角度延迟、暂停并在停止位置重新启动,angular,Angular,我从angular开始，我尝试制作一个场景，显示延迟的消息，并能够暂停以等待基于消息的响应我设法显示了消息，但暂停、等待回答和重新启动或场景停止的功能给我带来了比我想象的更多的麻烦我想我可能会使用Observable或Promise，但我不熟悉这些特性，文档也没有太大帮助如果你能告诉我怎么做，或者给我举个类似的例子，我会非常高兴下面是以基本方式显示消息的代码场景1.ts import {Message} from "./message"; export class Scenario

我从angular开始，我尝试制作一个场景，显示延迟的消息，并能够暂停以等待基于消息的响应

我设法显示了消息，但暂停、等待回答和重新启动或场景停止的功能给我带来了比我想象的更多的麻烦

我想我可能会使用Observable或Promise，但我不熟悉这些特性，文档也没有太大帮助

如果你能告诉我怎么做，或者给我举个类似的例子，我会非常高兴

下面是以基本方式显示消息的代码

场景1.ts

import {Message} from "./message";

export class Scenario {
  id: number;
  messages: Array<Message>;
}

import {Scenario} from "./scenario";

export const SCENARIOS: Scenario[] = [
  {
    id      : 1,
    messages: [
      {id: 1, message: 'Message 1', delay: 5, wait: false, type: ''},
      {id: 2, message: 'Message 2', delay: 5, wait: false, type: ''},
      {id: 3, message: 'Message 3', delay: 5, wait: true, type: 'text'},
      {id: 4, message: 'Message 4', delay: 5, wait: true, type: 'text'},
      {id: 5, message: 'Message 5', delay: 5, wait: true, type: 'date'},
      {id: 6, message: 'Message 6', delay: 5, wait: true, type: 'email'},
      {id: 7, message: 'Message 7', delay: 5, wait: false, type: ''},
      {id: 8, message: 'Message 8', delay: 5, wait: true, type: 'text'},
      {id: 9, message: 'Message 9', delay: 5, wait: true, type: 'tel'}
    ]
  }
];

模拟场景

import {Message} from "./message";

export class Scenario {
  id: number;
  messages: Array<Message>;
}

import {Scenario} from "./scenario";

export const SCENARIOS: Scenario[] = [
  {
    id      : 1,
    messages: [
      {id: 1, message: 'Message 1', delay: 5, wait: false, type: ''},
      {id: 2, message: 'Message 2', delay: 5, wait: false, type: ''},
      {id: 3, message: 'Message 3', delay: 5, wait: true, type: 'text'},
      {id: 4, message: 'Message 4', delay: 5, wait: true, type: 'text'},
      {id: 5, message: 'Message 5', delay: 5, wait: true, type: 'date'},
      {id: 6, message: 'Message 6', delay: 5, wait: true, type: 'email'},
      {id: 7, message: 'Message 7', delay: 5, wait: false, type: ''},
      {id: 8, message: 'Message 8', delay: 5, wait: true, type: 'text'},
      {id: 9, message: 'Message 9', delay: 5, wait: true, type: 'tel'}
    ]
  }
];

ApiTchatLibService.ts

getScenarios(): Observable<Scenario[]> {
    return of(SCENARIOS);
}

getScenario(id: number): Observable<Scenario> {
    return of(SCENARIOS.find(scenario => scenario.id === id));
}

getMessages(id: number): Observable<Message[]> {
    return of(SCENARIOS.find(scenario => scenario.id === id).messages);
}

getScenarios（）：可观察{
返回（场景）；
}
getScenario（id:number）：可观察{
返回（SCENARIOS.find（scenario=>scenario.id==id））；
}
getMessages（id:number）：可观察{
返回（SCENARIOS.find（scenario=>scenario.id==id.messages）；
}

ApiTchatLibComponent.ts

import {Component, OnInit} from '@angular/core';
import {ApiTchatLibService} from "./api-tchat-lib.service";
import {Message} from "./message";

@Component({
  selector: 'atl-api-tchat-lib',
  template: `
    <p *ngFor="let message of messages" data-id="{{message.id}}">{{message.message}}</p>
  `,
  styles  : []
})
export class ApiTchatLibComponent implements OnInit {

  messages: Array<Message> = [];
  isWaiting: boolean = false;

  constructor(private apiTchatLibService: ApiTchatLibService) {
  }

  getMessages() {
    this.apiTchatLibService.getMessages(1).subscribe(messages => {
        from(messages).pipe(
            concatMap(item => of(item).pipe(
                delay(item.delay * 1000)
            ))
        ).subscribe((r) => {
            this.messages.push(r);
        });
    });
  }

  ngOnInit() {
    this.getMessages();
  }
}

从'@angular/core'导入{Component，OnInit}；
从“/api tchat lib.service”导入{ApiTchatLibService}”；
从“/Message”导入{Message}；
@组成部分({
选择器：“atl api tchat lib”，
模板：`
数据id=“{message.id}”>{{message.message}}
`,
样式：[]
})
导出类ApiTchatLibComponent实现OnInit{
消息：数组=[]；
isWaiting:boolean=false；
构造函数（私有apiTchatLibService:apiTchatLibService）{
}
getMessages（）{
this.apiTchatLibService.getMessages（1）.subscribe（messages=>{
来自（消息）。管道(
concatMap（项目=>of（项目）.pipe(
延迟（项目延迟*1000）
))
).订阅（（r）=>{
这个.messages.push（r）；
});
});
}
恩戈尼尼特（）{
这是getMessages（）；
}
}

您可以通过rxjs轻松实现这一点

示例代码块

from([ { delay: 1000, message: 'A'} , { delay: 2000 , message: 'B'}, { delay: 3000 , message: 'C'} ]).pipe(
  concatMap( item => of(item).pipe( delay( item.delay ) )) 
).subscribe((r) => {
  console.log(r.message);
});

延迟代码

import { concatMap, delay } from 'rxjs/operators';
import { of, from } from 'rxjs';

    getMessages() {
        this.apiTchatLibService.getMessages(1).subscribe(messages => {


       from(messages).pipe(
          concatMap( item => of(item).pipe( delay( item.delay ) )) 
       ).subscribe((r) => {
         this.messages.push(r.message)
       });

     }

在这里，我们创建了一个具有延迟的可观察的模型。 concatMap将帮助您对消息进行排队

开始/暂停代码：您可以获取对象直到等待，剩余的可以移动到阵列

import { concatMap, delay } from 'rxjs/operators';
import { of, from } from 'rxjs';

class YourClass {
  nextIteration = [];
  messages = [];

  getMessages() {
    this.apiTchatLibService.getMessages(1).subscribe(messages => {
      from(this.start(messages))
        .pipe(concatMap(item => of(item).pipe(delay(item.delay))))
        .subscribe(r => {
          this.messages.push(r.message);
        });
    });
  }

  getNextList(messages) {
    this.nextIteration = [];
    let flag = true;
    let obsMessages = [];
    for (let message of messages) {
      if (flag) {
        obsMessages = [...obsMessages, message];
      } else {
        this.nextIteration = [...this.nextIteration, message];
      }
      if (message.wait) {
        flag = false;
      }
    }
    return obsMessages;
  }

  start(messages) {
    from(this.getNextList(messages))
      .pipe(concatMap(item => of(item).pipe(delay(item.delay))))
      .subscribe(r => {
        console.log(r.message);
      });
  }

  resume() {
    this.start(this.nextIteration);
  }

}


<button (click)="resume()">Start</button>

从'rxjs/operators'导入{concatMap，delay}；
从“rxjs”导入{of，from}；
你的班级{
下滴度=[]；
消息=[]；
getMessages（）{
this.apiTchatLibService.getMessages（1）.subscribe（messages=>{
从（this.start（messages））
.pipe（concatMap（item=>of（item）.pipe（delay（item.delay）））
.订阅（r=>{
this.messages.push（r.message）；
});
});
}
getNextList（消息）{
this.nextIteration=[]；
让flag=true；
让obsMessages=[]；
for（让消息成为消息中的消息）{
国际单项体育联合会（旗）{
obsMessages=[…obsMessages，message]；
}否则{
this.nextIteration=[…this.nextIteration，message]；
}
if（message.wait）{
flag=false；
}
}
返回消息；
}
开始（消息）{
来自（this.getNextList（messages））
.pipe（concatMap（item=>of（item）.pipe（delay（item.delay）））
.订阅（r=>{
console.log（r.message）；
});
}
简历（）{
this.start（this.nextIteration）；
}
}
开始

@rijin建议延迟的好方法，我会避免嵌套订阅

getMessages() {


  this.apiTchatLibService
  .getMessages(1)
  .pipe(
    concatMap(messages => from(messages).pipe(delay(message => message.delay)))
  )
  .subscribe(() => {
    this.messages.push(message);
  });
}

如果要暂停/恢复，需要将resume$stream传递到此方法中。当您需要恢复时，只需将事件放入resume$流中

getMessages() {
  this.apiTchatLibService.getMessages(1).pipe(
    concatMap(messages => from(messages).pipe(
       delayWhen(message => message.wait ? this.resume$ : timer(item.delay))
    )
  ).subscribe((r) => {
   this.messages.push(r.message)
  });
}

Thx您的代码工作正常，我更新了我的帖子，但是我应该如何暂停并恢复可观察的？您希望暂停并恢复哪种情况？消息的等待值设置为true或false，当该值为true时，我希望循环暂停，例如，正在等待单击以重新启动。共享您的数据我编辑了场景的模拟数据，其中包含圣诞节期间的留言簿，您的解决方案看起来不错，但我从Angular开始，我不太明白如何使用resume$，您能在您的示例中添加更多内容吗？