Как реализовать модал «Готов, Установить, Иди», используя Angular 5

Question

Я пишу приложение Angular 5 / машинопись.

Прежде чем пользователю будет предоставлена ​​форма, я бы хотел, чтобы слова "готов", "установить", "перейти" были высвечены на экране, прежде чем пользователь сможет начать. Каждое слово / диалог / модал будет отображаться в течение небольшого промежутка времени (скажем, 1 секунда), не требуя закрытия взаимодействия с пользователем.

У меня мало опыта работы с Angular и машинописью, поэтому я хотел бы получить любое возможное решение о том, как реализовать эту функцию?

Большое спасибо.

Answer 1

Спасибо @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];     
            })
      }

... с переменной {{readyTitle}}, связанной с моим заголовком диалогового окна в шаблоне html.

Answer 2

Один из подходов заключается в использовании функции 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