Запуск модальной из функции обратного отсчета - PullRequest
Новая
       25

Запуск модальной из функции обратного отсчета

0 голосов
/ 07 февраля 2019

Я пытаюсь запустить модальный загрузчик, когда мой jsonwebtoken близок к истечению срока действия.

Я могу запустить модал с помощью кнопки на панели навигации, но не могу получитьмодальный для запуска из функции.

, когда я пытаюсь вызвать модальный режим с помощью this.openRenew (renew);я получаю сообщение об ошибке обновления имени, 

**** navbar.html
<!-- Renew Token -->
<ng-template #renew let-modal>
    <div class="modal-header">
        <h4 class="modal-title" id="renewModal">Renew Log In</h4>
        <button type="button" class="close" aria-label="Close 
            (click)="modal.dismiss('Cross click')">
            <span aria-hidden="true">&times;</span>
         </button>
    </div>
    <div class="modal-body">
        Your Session In About To Expire.
        For Security Please Confirm Your Password To Continue.
        <form>
            <div class="form-group">
                <label for="password">Password</label>
                <input id="password" class="form-control"
                    placeholder="Password" name="password">
            </div>
        </form>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-outline-dark" 
            (click)="modal.close('Save click')">Log Back In</button>
    </div>
</ng-template>


**** navbar.ts

constructor(
    public _auth:AuthService,
    public _router:Router,
    public modalService: NgbModal) {
        this._auth.time.subscribe((now: Date) => {
            this.currentTime = now.valueOf();
            if(!!this._auth.emToken){
                if (!this.timeToRenew || this._auth.emExpTime==null){
                    console.log('Checking Time to renew', 
                        this._auth.emExpTime*1000-this.currentTime );
                    if((this._auth.emExpTime*1000)-45000<this.currentTime){
                        this.timeToRenew = true;
                        console.log('Time to Log Back In');
                         / * Need to trigger openRenew() here *
                    }
                }
            }
        });
    }

openRenew(renew) {
    this.modalService.open(renew, {ariaLabelledBy: 
         'renewModal'}).result.then(
         (result) => {
             console.log(result);
             // validate password 
    });
 }

1 Ответ

0 голосов
/ 08 февраля 2019

Я собрал демо StackBlitz , чтобы показать, как это работает.Через 10 секунд он автоматически отобразит модальное состояние.

В ваш код необходимо внести несколько изменений, чтобы заставить его работать:

i.Убедитесь, что вы можете получить ссылку на модальный шаблон в своем файле TS, используя следующий код для объявления шаблона в качестве переменной класса и используя @ViewChild для получения ссылки на него в HTML: 

@ViewChild('renew')
private renew: TemplateRef<any>;

Я изменил логику для упрощения демонстрации - в этом примере AuthService запускает время каждые 5 секунд.Компонент слушает это, и если метка времени, испускаемая AuthService, превышает 10 секунд после создания компонента, он отображает модальное значение.

ii.Вам нужно будет назначить подписку переменной subscription, чтобы затем можно было отменить подписку при открытии модального окна: 

// 1. Maintain a reference to the subscription
const subscription: Subscription = this._auth.time.subscribe((now: Date) => {
    ...
    if (/*should renew*/) {
        this.openRenew(this.renew);
        subscription.unsubscribe(); // 2. Unsubscribe here after opening modal
    }
});

. Это предотвращает отображение дополнительных модов поверх оригинального каждый раз, когда AuthService испускает метку времени.

...