首页
学习
活动
专区
工具
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.5K40

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.5K30

如何使用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指令运行。

33620

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

基本上,我们应用程序所有组件(我们应用程序将由不同组件组成)将在** src ** 文件夹(包括app文件夹根组件和在pages文件夹我们所有的页面组件)。...这次我们定义了另一个按钮,简单地调用了定义add-item-page.tssaveItem函数。...除此之外,我们创建了saveItem函数来创建newItem对象,它使用当前标题和描述值(即我们建立双向数据绑定,无论用户输入什么),然后我们关闭视图,同时我们也传入了newItemdismiss方法...构造函数,我们建立一个 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.3K40

AngularDart4.0 指南- 表单 顶

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

17.5K30

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.

6.9K20

构建具有用户身份认证 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.2K50

构建具有用户身份认证 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

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

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

87230

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

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

41.3K51

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

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

11K30

AngularJS浅谈-博客

2、浏览器载入angular.js脚本。 3、AngularJS等到DOMContentLoaded事件触发。 4、AngularJS寻找ng-app指令,这个指令指示了应用边界。... AngularJS , $scope 是一个应用象(属于应用变量和函数)。 控制器 $scope (相当于作用域、控制范围)用来保存AngularJS Model(模型)对象。...记住一点:大型应用程序,通常是把控制器存储在外部文件。...只需要把 标签代码复制到名为 js文件.js 外部文件即可,然后script引用js文件: 接下来说一下AngularJs核心集中特性吧!! 先来个图!...那我们js代码定义模块和ng-app有什么关系呢?很明显,它是告诉AngularJS应用在启动时加载指定模块,假设这里ng-app只是放一个纯标签,而不给它赋值。

2.4K30

REDHAWK——波形

简单波形,组装控制器身份则不那么重要。 外部端口用于使组件端口可供其他应用程序使用,促进应用程序连通性。 开发者使用概览标签页来设置波形组装控制器并描述波形。...“All Components” 部分显示了当前波形所有组件,以及“添加…”和“移除”按钮,这些按钮可用于从波形添加或移除选定组件。...①、应用程序选项 SAD 文件可以为应用程序设置两个选项: STOP_TIMEOUT - 控制发生超时之前允许时间。应用程序 stop 函数委托给应用程序每个组件。...可以看到如下界面: 要启动波形,选择工具栏启动波形(绿色三角形)按钮。 这会打开波形浏览器。...④、停止并释放应用程序 选择工具栏停止波形(红色方块)按钮。绘图停止更新。 选择工具栏释放波形(红色 X)按钮。波形浏览器关闭。 ⑤、关闭域 最后,关闭域管理器和设备管理器。

11310
领券