首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在Angular 7应用程序中的保存以后按钮关闭浏览器中的当前标签

在Angular 7应用程序中,要实现保存以后按钮关闭浏览器中的当前标签,可以通过以下步骤进行操作:

  1. 首先,在Angular应用程序中创建一个保存按钮,并为其添加一个点击事件处理程序。
代码语言:txt
复制
<button (click)="saveAndClose()">保存以后关闭</button>
  1. 在组件类中,实现saveAndClose()方法,该方法将执行保存操作并关闭当前标签页。
代码语言:txt
复制
import { Component } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  saveAndClose() {
    // 执行保存操作

    // 关闭当前标签页
    window.close();
  }
}
  1. saveAndClose()方法中,你可以执行保存操作,例如将数据发送到服务器或将数据保存到本地存储。你可以使用Angular提供的HTTP模块发送HTTP请求,或者使用其他适合你的保存方式。
  2. 在保存完成后,使用window.close()方法关闭当前标签页。这将关闭浏览器中的当前标签页。

请注意,由于浏览器的安全限制,window.close()方法只能关闭由JavaScript打开的标签页。如果当前标签页不是由JavaScript打开的,或者在浏览器中进行了其他操作(例如用户交互),则无法通过代码关闭标签页。

以上是在Angular 7应用程序中实现保存以后按钮关闭浏览器中当前标签的方法。对于更多关于Angular的信息和学习资源,你可以参考腾讯云的Angular产品介绍页面:Angular产品介绍

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

如何下载微信图文消息里的视频?在浏览器中打开保存到手机

刚刚看到别人分享在朋友圈里的文章里面有个视频,是微信公众平台内嵌视频,挺有意思的,想把它下载下来,那么,怎么提取微信图文消息里的视频呢?   ...研究了好一会,采用迂回术总算把微信图文里的视频保存到手机了   打开那个含有视频的图文消息,点击右上角的菜单,选“在浏览器中打开”,下图红色箭头所示 ?   ...一般默认的浏览器都可以播放视频,播放的过程中会有一个下载的菜单,如下图箭头所示 ?   点击下载就能把图文消息里的视频保存到手机中。...当然有特殊情况,在苹果Safari浏览器中,视频右侧没有出现下载按钮,建议换用其他的

5.6K40
  • AngularDart 4.0 高级-路由概述 顶

    本指南涵盖路由器的主要功能,通过演示可以实时运行的小应用程序(查看源代码)演示它们。 概观 浏览器是一种熟悉的应用程序导航模型: 在地址栏中输入一个URL,然后浏览器导航到相应的页面。...点击页面上的链接,浏览器导航到新页面。 点击浏览器的后退和前进按钮,浏览器会前后浏览您浏览过的网页的历史记录。 Angular路由器借鉴了这种模式。...当用户点击按钮,从下拉框中选择,或者响应来自任何来源的其他刺激时,您都可以进行命令式导航。并且路由器在浏览器的历史记录中记录活动,所以后退和前进按钮也起作用。...如果您点击了浏览器的后退按钮而不是“返回”按钮,该应用程序也会将您返回到英雄列表。 Angular的应用程序像正常的网页导航一样更新浏览器的历史。 现在点击危机中心链接查看正在进行的危机列表。 ?...在离开当前视图导航之前,挂钩使您有机会清理或询问用户的许可。

    6.1K20

    如何使用纯前端控件集 WijmoJS 中的可视化在线设计器

    Generating code 如果您对当前WijmoJS可视化在线Web设计器的设计效果感到满意,则可以生成在应用程序中使用的代码。...使用左侧的“保存”图标将HTML写入文件或选择所需的片段并使用浏览器的UI将其复制到剪贴板。生成的代码包含以下元素: 标签,引用主要WijmoJS 的CSS文件和所选主题文件。...标签,自动生成用于WijmoJS设计器支持的任何纯前端控件组合的标签。您可以省略大量不需要的模块引用。 标签,对于在设计器中创建的每个控件,均包含默认为空的的标记。...如果要保存设计器布局以供将来使用,请使用主工具栏上的“保存”按钮将当前状态写入JSON文件,然后使用主工具栏上的“打开”按钮重新加载所选文件的内容。...在“属性”窗格中向下滚动,找到系列属性,然后单击“显示项目”按钮将其展开。 将鼠标悬停在最新价格上,然后单击出现的链接。

    5.9K20

    AngularDart4.0 英雄之旅-教程-07路由 顶

    在浏览器中,转至应用程序根目录(/)并重新加载。 该应用程序显示dashboard ,您可以在dashboard 和heroes之间导航。 ...在构造函数中注入HeroService,并将其保存在一个专用的_heroService字段中。 调用服务来获取Angular ngOnInit()生命周期钩子中的英雄。...要在其他地方导航,用户可以单击AppComponent中的两个链接之一,或单击浏览器的后退按钮。...仪表板英雄的行为应该像锚标签:当悬停在英雄的名字,目标网址应该显示在浏览器的状态栏,用户应该能够复制链接或在新标签打开英雄详细信息视图。...在HeroesComponent中选择一个英雄 在HeroesComponent中,当前的模板展示了一个“主/细节”风格,顶部是英雄列表,下方是选定的英雄的详细信息。

    17.6K30

    如何使用AngularJS和PHP为任何位置生成短而独特的数字地址

    保存文件,然后再次在浏览器中访问该应用程序。您将看到以下内容: 如您所见,我们已成功将地图添加到应用程序中。您可以拖动地图以聚焦在不同位置,放大和缩小,以及在地图,卫星和街道视图之间切换。...在浏览器中再次访问该应用程序,然后在第一个字段中输入状态名称。将文本光标移动到下一个字段时,不会显示纬度和经度标签,地图上显示的位置也不会更改以反映您输入的信息。让我们启用这些行为。...保存文件,但暂时保持打开状态。如果您再次在浏览器中访问该应用程序,则不会看到其外观或行为的任何新变化。同样,如果您要输入地址并单击“ 生成”按钮,则应用程序仍然不会生成或显示地图代码。...保存此文件,然后再次访问您的应用程序。在状态字段中输入US-NY然后单击TAB以将输入焦点更改为下一个字段。您将看到以下输出: 请注意,您在表单中输入的地理坐标和物理地址显示在地图下方。...这是您需要进行的最后一次更改,以便从物理地址生成地图代码。保存并关闭该文件,然后再次在浏览器中刷新应用程序。输入您选择的地址,然后单击“ 生成”按钮。

    13.2K20

    看看Angular有啥新玩法!手把手教你在Angular15中集成Excel报表插件

    的情况下构建应用程序。...在Angular15中将这些API已经更新成为了稳定版,并且以后将通过语义版本去控制独立 APIs 的发展。...语言服务中的自动导入 在Angular15中,可以自动导入在模板中使用但是没有添加到NgModule中的组 件或独立组件。 既然Angular都升级了,咱们是不是可以尝试一些新的玩法?...传统的报表需要从浏览器下载之后再用Excel打开才能修改数据,那么,有没有一种插件可以实现直接在浏览器中修改Excel报表数据呢?答案是肯定的。...(初始化一个Angular工程) 将下面的表格资源粘贴到package.json文件中的dependencies标签,并使用npm install指令下载和ng serve指令运行。

    39420

    使用Ionic2开发Todo应用0 开始之前1 创建新的Ionic 2工程2. 设置主页(Home page)3 持久化数据保存4 总结

    基本上,我们的应用程序中的所有组件(我们的应用程序将由不同的组件组成)将在** src ** 文件夹中(包括app文件夹中的根组件和在pages文件夹中我们所有的页面组件)。...这次我们定义了另一个按钮,简单地调用了定义在add-item-page.ts中的saveItem函数。...除此之外,我们创建了saveItem函数来创建newItem对象,它使用当前的标题和描述值(即我们建立双向数据绑定,无论用户输入什么),然后我们关闭视图,同时我们也传入了newItem在dismiss方法中...在构造函数中,我们建立一个 Storage 服务的引用。 数组中save函数简单地将所有的项放入数组并保存到存储,每当项目变化我们将调用这个函数。...4 总结 在本教程中我们已经介绍了如何实现很多Ionic 2应用的常用功能: 创建视图 监听和处理事件 视图之间的导航 在视图之间传递数据 建立双向数据绑定 保存数据 显然还有很多我们可以做,使这个应用程序更漂亮

    6.1K50

    如何用Python&Fabric打造区块链“淘宝”商城

    生成的 REST API 供客户端应用程序使用,帮助用户在区块链网络中整合非区块链的应用程序。...要创建 Angular Web 应用程序,在终端中输入 yo hyperledger-composer,选择 Angular,选择使用卡 admin @ cards-trading-network ,连接到当前业务网络和...为解决这个问题,你需要对生成的 Angular 应用程序做一些修改。 ? 1)按下按钮时打开一个模态(modal) 你需要做的第一个修改就是让按钮打开模态窗口。...保存文件,打开浏览器,尝试按下调用(invoke)按钮。成功,可用了! ? 2)删除不必要的字段 仅仅打开模态是不够的。...保存文件,打开浏览器,然后点击调用(invoke)按钮,是这样的: ? 你现在可以通过在这些字段中传入数据来创建交易。添加一笔交易: ?

    2.4K40

    vue之Cookie

    在浏览器中,如果想要查看当前域名下的Cookie,也可以在开发者工具中,选择应用程序,查看。...从硬件方面理解,localStorage的数据是存储在硬盘中的,关闭浏览器时数据仍然在硬盘上,再次打开浏览器仍然可以获取localStorage保存的数据。...存储的数据只在当前网页所在的浏览器标签页内有效,只要这个浏览器标签页没有关闭,即使刷新页面或进入同源的另一页面,数据仍然存在。...当浏览器标签页关闭后,sessionStorage中存储的数据将被自动清除。 如果打开了不同的标签页,即使是同一页面,sessionStorage对象也是不同的。...Cookie 设置的 Cookie 过期时间之前一直有效,即使窗口或浏览器关闭。 作用域:sessionStorage 只在同源的同窗口(或标签页)中共享数据,也就是只在当前会话中共享。

    8000

    AngularDart4.0 指南- 表单 顶

    模板驱动的形式 您可以通过使用本页中描述的特定于表单的指令和技术在Angular模板语法中编写模板来构建表单。 您也可以使用响应式(或模型驱动)方法来构建表单。...禁用窗体的提交按钮,直到窗体有效。 建立 按照设置说明创建一个名为表单的新项目。 添加angular_forms Angular表单功能位于angular_forms库中,该库位于其自己的包中。...顺便说一句,您可以注入数据服务来获取和保存真实数据,或者将这些属性作为输入和输出(请参阅“模板语法”页面中的输入和输出属性)来绑定到父组件。 这不是现在的问题,这些未来的变化不会影响表单。...p模板输入变量在每次迭代中是不同的power; 您使用插值语法显示其名称。 与ngModel的双向数据绑定 现在运行应用程序有点令人失望。 ? 你没有看到英雄数据,因为你还没有绑定到英雄。...如果没有Angular的帮助,你需要做什么才能将按钮的启用/禁用状态连接到表单的有效性? 对你来说,这很简单: 在(增强的)表单元素上定义一个模板引用变量。 在多处的按钮中引用该变量。

    17.5K30

    01_Cookie&WebStorage

    在浏览器中,如果想要查看当前域名下的Cookie,也可以在开发者工具中,选择应用程序,查看。...从硬件方面理解,localStorage的数据是存储在硬盘中的,关闭浏览器时数据仍然在硬盘上,再次打开浏览器仍然可以获取localStorage保存的数据。...存储的数据只在当前网页所在的浏览器标签页内有效,只要这个浏览器标签页没有关闭,即使刷新页面或进入同源的另一页面,数据仍然存在。...当浏览器标签页关闭后,sessionStorage中存储的数据将被自动清除。 如果打开了不同的标签页,即使是同一页面,sessionStorage对象也是不同的。...Cookie 设置的 Cookie 过期时间之前一直有效,即使窗口或浏览器关闭。 作用域:sessionStorage 只在同源的同窗口(或标签页)中共享数据,也就是只在当前会话中共享。

    7100

    构建具有用户身份认证的 Ionic 应用

    你可以使用 Chrome 的设备模式查看应用程序在 iPhone 6 中的效果。 ? 使用 Ionic serve 命令的特点是它会在浏览器中显示编译错误,而不是(有时会隐藏)在开发控制台。...下载 这张图片,将它拷贝到 src/assets/image/okta.png,在 login.html 的 标签中添加以下代码。...你可以退出之后看一下带标识的登录页。 ? 注意: 你可能注意到退出之后标签页并没有消失。我正在查找 没有正常工作 的原因。 发布到移动设备 使用 Ionic 在浏览器中开发移动应用是非常酷的事情。...--lab 标识会在浏览器中打开一个页面让你查看在不同设备中的效果。 ? LoginPage 在加载时会自动聚焦到 email 输入框。...这意味着你可以将 Ionic app 部署成 web app (不是移动端 app) ,它可以在离线的 支持 service workers 的浏览器 中运行。

    23.3K50

    构建具有用户身份认证的 Ionic 应用

    你可以使用 Chrome 的设备模式查看应用程序在 iPhone 6 中的效果。 ? 使用 Ionic serve 命令的特点是它会在浏览器中显示编译错误,而不是(有时会隐藏)在开发控制台。...下载 这张图片,将它拷贝到 src/assets/image/okta.png,在 login.html 的 标签中添加以下代码。...你可以退出之后看一下带标识的登录页。 ? 注意: 你可能注意到退出之后标签页并没有消失。我正在查找 没有正常工作 的原因。 发布到移动设备 使用 Ionic 在浏览器中开发移动应用是非常酷的事情。...--lab 标识会在浏览器中打开一个页面让你查看在不同设备中的效果。 ? LoginPage 在加载时会自动聚焦到 email 输入框。...这意味着你可以将 Ionic app 部署成 web app (不是移动端 app) ,它可以在离线的 支持 service workers 的浏览器 中运行。

    23.8K00

    Delphi入门教程

    图标用于形象地表示本应用程序或打开的文档类型。标题名一般由用户打开的文档名和应用程序名组合而成。系统按钮包含3个,最小化,最大化,关闭按钮 2.菜单栏:包含系统能够执行的并进行分类的命令集合。...包含了按钮、标签、文本编辑框、组合列表、复选框、选项卡等多种部件 1.4.1.3 基本windows操作 1.鼠标单击操作 2.鼠标双击操作:在Windows系统的资源管理器中常用此操作来打开文档和执行应用程序...【Reopen】:打开一个程序员最近使用过的文件,Delphi6每次关闭应用程序时会保存访问记录,以保证下次能够快速打开 5.【Save】:保存当前文件,以备后用 6....【Save As】:将当前文件另存为其他文件 7.【Sava Project As】:将当前整个项目另存为其他的项目文件 8.【Save All】:保存所有文件 9....【Close】:关闭当前文件 10.【Close All】:关闭所有当前项目中的文件(提示保存修改) 11.【Use Unit】:将当前的单元文件以列表方式引用至此操作所打开的文件中 12.

    7.3K20

    【17】进大厂必须掌握的面试题-50个Angular面试

    7. 在Angular中,什么是字符串插值? Angular中的字符串插值是一种特殊的语法,它在双花括号 {{}}中使用模板表达式来显示组件数据。它也称为小胡子语法。...这些容器保存着专门用于应用程序域,工作流或一组紧密相关的功能的内聚代码块。这些模块通常包含组件,服务提供商和其他代码文件,其范围由包含的NgModule定义。...ChangeDetectorRef.prototype.detectChanges():它将在当前组件及其子组件上启动更改检测。 48.在Angular中解释ng-app指令。...ng-app指令用于定义Angular应用程序,使我们可以在Angular应用程序中使用自动引导。它表示Angular应用程序的根元素,通常在或标签附近声明。...可以使用ng-hide指令与控制器一起轻松隐藏HTML元素,以在单击按钮时隐藏HTML元素。

    41.5K51

    AJAX如何处理书签和翻页按扭(上)

    问题: 书签和回退按钮在传统的多页面的Web应用程序中工作的非常好。当用户浏览网站的时候,浏览器的地址栏记录随新的URLs更新,这些记录可以拷贝到email 或者 书签中供以后使用。...RSH 目前还是Beta 状态,可以在Firefox 1.0 , Netscape 7+,Internet Explorer 6+等浏览器上工作,目前还不支持Safari浏览器。...AJAX 应用程序把自己注册为历史浏览的监听器,当用户使用 “前进”“回退”按钮来浏览时,历史浏览时间被触发,调用 add() 方法来提供给浏览器新的地址,并保存历史数据。...在普通的网页中,当用户浏览到一个新的网址,浏览器卸载并清除当前网页所有的程序和JavaScript状态,如果用户返回时,所有的数据都丢失了。...使用这个功能的一个例子是在一个网页字符编辑器中,如果用户离开当前网页。当用户回退时,浏览器将会把对象返回给历史浏览变动监听器。

    89030

    AngularDart4.0 英雄之旅-教程-08HTTP 顶

    在此页面中,您将进行以下改进。 从服务器获取英雄数据。 让用户添加,编辑和删除英雄的名字。 将更改保存到服务器。 您将教会应用程序对远程服务器的Web API进行相应的HTTP调用。...在继续英雄之旅之前,请确认您具有以下结构。 ? 如果该应用程序尚未运行,请启动该应用程序。 在进行更改时,请通过重新加载浏览器窗口来保持运行。...添加保存英雄详情的能力 在英雄细节模板的末尾,添加一个保存按钮,其中包含一个点击事件绑定,调用一个名为save()的新组件方法。...刷新浏览器,更改英雄名称,保存更改,然后单击浏览器“后退”按钮。 现在应该继续进行更改。 添加加入英雄的能力 要添加英雄,应用程序需要英雄的名字。 您可以使用与添加按钮配对的输入元素。...在仪表板中,在搜索框中输入一些文字。 如果你输入的字符匹配任何现有的英雄名字,你会看到这样的东西。 ? 应用程序结构和代码 查看此页面的实例(查看源代码)中的示例源代码。 确认您具有以下结构: ?

    11K30
    领券