Angular 2+ модальный всплывающий таймер и перенаправление - PullRequest
Новая
       6

Angular 2+ модальный всплывающий таймер и перенаправление

0 голосов
/ 27 июня 2018

Я хочу сделать запрос на mongodb, и пока он загружается, я хочу всплывающее окно с модальными окнами с песочными часами, которые уходят, когда запрос заканчивается, и перенаправляют на другой маршрут, если это возможно.

Угловой 2+ NodeJS MongoDB

У меня готово модальное всплывающее окно.

Редактировать: Простой способ Я нашел, добавив "dialogRef.close () в res" 

        this.countModelService.getCount(datas)
        .subscribe(res =>
        {
            dialogRef.close();
        });

1 Ответ

0 голосов
/ 27 июня 2018

Это больше относится angular, чем node.js ... Представьте, что ваш запрос mongoDB реализован как угловая служба mongoService. Представьте, ваше всплывающее окно сделано с помощью ng-bootstrap - NgbModal. Тогда код на стороне клиента может выглядеть так: 

import { Component, Inject, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { MongoService } from './services/mongo.service';

@Component({
  selector: 'app-mycomp',
  templateUrl: './mycomp.component.html',
  styleUrls: ['./mycomp.component.scss']
})
export class MycompComponent implements OnInit, ... {

    mr: NgbModalRef;

    constructor(...
        private mongo: MongoService,
        private modalService: NgbModal,
        ...) {
        }

    ngOnInit() {
        // some initialization ...
    }

    getFromDB() {       // <--- this is the function you call when clicking your button

        this.mr = this.modalService.open(content);
        mongo.getData().subscribe(
            data => {
                // ... your data handling ...
                this.mr.close();
                this.router.navigate(['/anotherroute']);

            },
            error => {
                // ... your error handling ...
                this.mr.close();
            }
        )
    }
}

CSS-стиль с песочными часами должен выглядеть примерно так: 

...
cursor: wait;
...
...