触发新警报时以编程方式关闭警报

Question

我有两种警报——二级警报和延迟警报二级警报消息首先显示，用户必须点击 OK 按钮才能关闭它。

但也有延迟警报..由 setTimeout() 触发当向用户显示此延迟警报时，我正在尝试自动关闭二级警报

我试过像这样解除二级警报

this.secondaryAlertVar.dismiss();

但它不起作用。

这是代码

import { Component, OnInit } from "@angular/core";
import * as dialogs from "tns-core-modules/ui/dialogs";
@Component({
    selector: "Home",
    moduleId: module.id,
    templateUrl: "./home.component.html",
    styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

    secondaryAlertVar: any;
    constructor() {
        this.secondaryAlerts(function () { }, 0, "Hhmm... ", "Alert");

        setTimeout(() => {
            this.delayedAlertBox("All other alerts should close automatically when this triggered");
        }, 10000);
    }

    ngOnInit() {
    }

    secondaryAlerts(callback, mode, message, title): any {
      this.secondaryAlertVar =  dialogs
            .alert({
                title: title,
                message: message,
                cancelable: false,
                okButtonText: "OK"
            })
            .then(callback);
    }

    delayedAlertBox(message) {
        this.secondaryAlertVar.dismiss();
        var options = {
            title: "Delayed Alert",
            message: message,
            okButtonText: "Ok",
            cancelable: false,
        };
        dialogs.alert(options).then(() => {
        });
    }
}

Playground Link

Answer 1

尝试使用 rxjs 你可以实现这一点。

import { Component, OnInit } from "@angular/core";
import * as dialogs from "tns-core-modules/ui/dialogs";
import { interval, timer } from 'rxjs';
import { takeUntil } from 'rxjs/operators'
@Component({
    selector: "Home",
    moduleId: module.id,
    templateUrl: "./home.component.html",
    styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

      source = interval(0);
      alive = true;
      secondaryAlertVar: any;

      constructor() {

       const example = this.source.pipe(takeWhile(() => this.alive));
       const subscribe = example.subscribe(val => {
        this.secondaryAlerts(function () { }, 0, "Hhmm... ", "Alert");
       });

        setTimeout(() => {
        this.alive = false;
            this.delayedAlertBox("All other alerts should close automatically when this triggered");
        }, 10000);
    }

    ngOnInit() {
    }

    secondaryAlerts(callback, mode, message, title): any {
      this.secondaryAlertVar =  dialogs
            .alert({
                title: title,
                message: message,
                cancelable: false,
                okButtonText: "OK"
            })
            .then(callback);
    }

    delayedAlertBox(message) {
        this.secondaryAlertVar.dismiss();
        var options = {
            title: "Delayed Alert",
            message: message,
            okButtonText: "Ok",
            cancelable: false,
        };
        dialogs.alert(options).then(() => {
        });
    }
}