Question

我正在写一篇Angular 5 /打字稿应用程序。

在向用户呈现表单之前，我希望单词＆＃34; ready＆＃34;，＆＃34; set＆＃34;，＆＃34; go＆＃34;在用户可以启动之前在屏幕上闪烁。每个单词/对话框/模态将显示少量时间（例如，1秒），无需用户交互即可关闭。

我对Angular和打字稿没什么经验，所以欢迎任何可能的解决方案来实现这个功能吗？

非常感谢。

Answer 1

一种方法是利用interval库中的rxjs函数，您可以轻松将其导入角度项目。

以下是您参考的可能示例

let words = ['Ready', 'Set', 'Go'];
Observable.interval(1000)
    .take(3)
    .subscribe(i => { 
        console.log(i); 
        console.log(words[0]); // note just simplified here, you probably need to add more logic to handle the animation etc
    })

所以上面只是一个快速的例子，说明如何通过使用区间函数来实现这一点。

或者，您也可以使用window.setInterval函数。我不打算在这里添加一个例子。您可以通过https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval

了解更多内容

Answer 2

感谢@woodykiddy提出的rxjs建议。在我的MatDialog组件中，我订阅了一个序列并从finally回调中关闭了对话框：


    private readyTitle: string;

    displayRSG() {    
        let words = ['Ready', 'Set', 'Go!', ''];
        const intrval = interval(900);
        const sequence = intrval.pipe(take(4));           
        const sub = sequence
            .finally(() => {
              console.log('Finally callback')
              this.closeDialog();          
            })
            .subscribe(i => {         
            this.readyTitle = words[i];     
            })
      }

...将jsn = bytes.Replace(jsn, []byte(" "), []byte(""), -1)变量绑定到html模板中的mat-dialog-title。

如何实现＆＃34; Ready，Set，Go＆＃34;使用Angular 5的模态

2 个答案: