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

2024-06-23

我有两种警报 - 辅助警报和延迟警报 首先显示辅助警报消息,用户必须单击“确定”按钮才能将其关闭。

但也有延迟警报......这是由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(() => {
        });
    }
}

尝试使用 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(() => {
        });
    }
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

角度-触发新警报时以编程方式关闭警报 的相关文章

  • 我无法在项目中使用节点波本威士忌

    我尝试对 scss 文件使用 npm 模块 波本威士忌 我收到以下错误 with function var paths Array prototype slice call arguments return concat apply bou
  • 如何在 webpack 2 和 typescript 以及 Angular 2 中使用 tree-shaking?

    我已经用 Angular 设置了 webpack 2 大多数情况下它似乎可以工作 但它似乎并没有做到这一点tree shaking 因为我有一个几乎不执行任何操作的应用程序 并且vendor js仍然是 800 KB 似乎关于如何打开 tr
  • 并行运行 Angular 和 AngularJS 框架

    我找到了描述如何将 Angular 2 组件集成到 AngularJS 中的资源 但所有这些都涉及像 Angular 项目一样设置 AngularJS 项目 需要 TypeScript 的转译器 需要 ES6 需要 import 语句 我想
  • 角 2 材料容器固定不工作

    我对 CSS 和 Angular 2 材质有疑问 任何固定定位元素的行为都不像固定在 md sidenav container 内 如果它不在容器内 则它可以正常工作 这是该问题的链接 只需将 md toolbar 复制并粘贴到容器内部 您
  • 如何强制 Angular Universal 从外部 api 预渲染内容?

    我想使用 SSR 来改进我的 Angular 单页应用程序的搜索引擎优化 我已经使用 Angular Universal 启用了 SSR 它致力于提供静态 html 但我的组件严重依赖异步 api 调用来构建页面上的内容 请参阅下面的示例
  • Ionic 3:菜单切换总是被隐藏

    我已经在 Ionic 3 中实现了汉堡菜单 但我遇到了一个问题 当我在 Android 设备上运行该应用程序时 汉堡菜单不断消失 即打开侧面菜单的按钮消失了 然而 这种情况只是偶尔发生 我尝试运行该应用程序 同时使用 Google Chro
  • 将 formControlName 与 之类的内容一起使用

    我有一个动态表单 显示我通过 REST 获得的多个数据集 用户将编辑此数据集 然后只需提交它即可将其发送回服务器 该表单是动态构建的FormBuilder array 并循环通过formArrayName ngFor在我的模板中 每个数据集
  • angular2-jwt 检查组件中的令牌是否过期?

    是否可以检查 Angular 2 应用程序组件内的 id 令牌是否过期 我用该方法得到了 AuthService public isAuthenticated boolean check if id token is expired or
  • Webpack 5 给 Angular 12 带来了哪些好处?

    我昨天更新到了 Angular 12 它使用了 Webpack 5 The 发行说明博客 https blog angular io angular v12 is now available 32ed51fbfd49 says 在 v11
  • 取消 flatMap 可观察调用链

    我正在使用 Angular 5 和 rxjs 我正在拨打 2 次服务电话 其中一次取决于其他结果 我正在使用 flatMap 进行此操作 我还使用 takeUntil 以便我可以在任何给定点中止操作 我的代码如下所示 this myserv
  • Angular 为多个根路径重用相同的延迟加载模块

    我将我的应用程序分成两个模块 一个具有主要的基本功能 另一个具有较少使用的功能 例如帐户设置 常见问题解答页面等 我想要完成的是延迟加载某些根路由路径的第二个模块 例如 account or settings无需创建许多不同的模块 据我所知
  • 如何获取 Angular2 中元素的当前位置信息

    我有ElementRef我的导航栏 我试图找出它离我的窗口顶部有多近 这样我就可以让它粘起来 div class nav bar div ViewChild navBar navBarElement 我正在滚动事件中打印出它的 native
  • Firebase 托管上的 Angular 9 项目无法传递 https 请求

    我在我的角度项目上使用了代理 如下所示 api target https
  • Angular Component CSS 封装是如何工作的?

    我想了解如果我创建两个样式表 Style 1 heading color green Style 2 heading color blue 现在如果这两种样式写在两个不同的视图中 渲染它们的时候 在布局上作为局部视图 https jakey
  • 源有 X 个元素,但目标仅允许 1 个

    打字稿编译显示此错误 源有 X 个元素 但目标仅允许 1 个 export const FooMapping id FooOperation display string id FooOperation Undefined display
  • 单击以删除/停用角度 2 中的辅助路线

    当我单击 撰写 按钮打开电子邮件模板时 例如 当单击撰写邮件时在 gmail 中给出 使用辅助路由在单页中实现多个模板 问题是 当单击十字按钮时 如何删除或停用此辅助路线 app ts RouteConfig path name Oppor
  • 当元素位于模态内部时,Angular ViewChildren 不起作用

    当模板引用变量放置在模态中时 因此最初未定义 我无法使用 ViewChildren 访问模板引用变量 即使在将模态插入到 DOM 中之后 元素的 QueryList 的长度仍然为零 我尝试注入 ChangeDetectorRef 然后使用
  • Angular:绑定到 @Input 别名

    我正在尝试在以下指令中设置输入别名example https angular io guide attribute directives bind to an input alias Input appAvatarColor name st
  • Angular 2 CanActivate 被调用两次

    我在使用 Angular 时遇到了路线守卫的问题 当导航到由于我未登录而不允许的页面时 我的 CanActivate 防护被调用两次 我有 1 个根模块 并在那里提供了我的 CanActivate 防护和其他服务 先感谢您 这是我的路由器
  • Ionic 3 同时进行深度链接和延迟加载

    根据我在文档 https ionicframework com docs api IonicModule forRoot and forums https forum ionicframework com t how to configur

随机推荐