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

【问题标题】：angular- programmatically close alert when a new alert is triggered触发新警报时以编程方式关闭警报
【发布时间】：2019-10-10 13:15:39
【问题描述】：

我有两种警报 - 辅助警报和延迟警报次要警报消息首先显示，用户必须点击确定按钮才能关闭它。

但也有延迟警报..由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

【问题讨论】：

您应该为此使用rxjs。如果你这样做了 - 你可以使用observable.pipe(takeUntil(delayedAlertBoxState$)) 并玩弄它。 :)
很抱歉，我不使用 nativescript，但我认为这个对话框可以生成 promise，您应该可以使用 from 连接到它。
从 rxjs 获取 BehaviorSubject，观察延迟警报。辅助警报关闭事件应该订阅延迟警报 observable。它会起作用，但需要正确思考和使用它。
在您的游乐场链接中，您似乎在点击事件时使用了一些 alert()。它在哪里声明
` dialogs.alert(options).then(() => { this.secondaryAlertVar.dismiss(); });` 这行得通吗？

标签： angular rxjs angular2-nativescript

【解决方案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(() => {
        });
    }
}

【讨论】：

这段代码有效吗？您的某些导入未使用。
我更新了我的答案，请检查一次。希望对你有帮助。
使用 takeWhile 而不是 takeUntil。我已经更新了答案，请检查一次。
我用您的最新更改尝试了此代码。它不工作。发生延迟警报时，辅助警报不会自动关闭。