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

如何在ng上调用函数-单击能够在新标签中打开的<a>链接

在ng(Angular)中调用函数以实现在新标签中打开<a>链接,可以通过以下步骤完成:

  1. 在组件的HTML模板中,使用<a>标签来创建链接,并通过点击事件调用组件中的函数。例如:
代码语言:txt
复制
<a (click)="openLink()">打开链接</a>
  1. 在组件的Typescript文件中,定义一个函数来处理点击事件,并在该函数中使用window.open()方法来打开链接。例如:
代码语言:txt
复制
openLink() {
  window.open('https://www.example.com', '_blank');
}

在上述代码中,https://www.example.com是要打开的链接地址,'_blank'表示在新标签页中打开链接。

  1. 如果需要在新标签中打开动态生成的链接,可以将链接地址作为函数的参数传递,并在函数中使用该参数来打开链接。例如:
代码语言:txt
复制
<a (click)="openLink('https://www.example.com')">打开链接</a>
代码语言:txt
复制
openLink(url: string) {
  window.open(url, '_blank');
}

这样,当用户单击链接时,将会调用openLink函数,并在新标签页中打开指定的链接。

需要注意的是,为了确保在Angular中调用window.open()方法能够正常工作,需要在组件的构造函数中注入DomSanitizer服务,并使用bypassSecurityTrustUrl()方法对链接地址进行安全处理。具体代码如下:

代码语言:txt
复制
import { DomSanitizer, SafeUrl } from '@angular/platform-browser';

constructor(private sanitizer: DomSanitizer) {}

openLink(url: string) {
  const safeUrl: SafeUrl = this.sanitizer.bypassSecurityTrustUrl(url);
  window.open(safeUrl.toString(), '_blank');
}

这样,就可以在ng上调用函数,实现在新标签中打开<a>链接。

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

相关·内容

火狐浏览器单击链接总是一个标签打开设置方法

Tab Mix Plus插件导致,本应该在当前页面打开,结果在标签打开了,附加组件,禁用掉 Tab Mix Plus插件即可; 我实现方法是装了一个Tab Mix Plus插件。...我用版本是0.4.1.0。 以下是简单设置:工具,选项,标签式浏览。有个新增按钮,点下去。 那个“所有链接”就是关键所在。 有人疑问了,我想打开一个链接,然后立马激活这个页面,怎么办?...把“链接”打上勾就OK了。 很简单,暂时还写不出很专业技术文章,发点上去充数吧。...发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/113491.html原文链接:https://javaforall.cn

3.2K40

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

机器安装了LAMP堆栈。这是必要,因为您将在本教程开发应用程序使用AngularJS和PHP,并且应用程序生成数字地址将存储MySQL数据库服务器安装Git。...您可以按照教程如何在Ubuntu 18.04快速安装Git来安装和设置Git。 第1步 - 获取Google API密钥 本教程,您将使用JavaScript创建Google Maps界面。...要获取自己API密钥,请访问Google“获取API密钥”页面。单击步骤1GET STARTED按钮,将打开一个弹出窗口,如下图所示: 单击复选框选择“ 地图”,然后单击“ 继续”。...回顾刚刚添加代码,请注意我们还添加了两个标签控件,它们将显示表单输入地理坐标和物理地址: . . ....每当用户单击Generate按钮时,index.php文件代码都会提交表单并调用该processForm函数,该函数以下createDigitalAddressApp.js位置定义: . . .

13.1K20

教程| Angular 4 中加载功能模块(

本教程将介绍如何在 Angular 开发和加载功能模块。尽管对于较小应用程序,根模块就足够用了,但对于更大更复杂应用程序,需要创建功能模块。还需要能够高效地加载模块,以获得最佳应用程序性能。...前提条件 要掌握本教程,需要在开发机器安装两个工具: Node Angular CLI 输入命令 ng -v,以便找到您当前使用 Angular CLI 和 Node 版本。...打开 Chrome 浏览器并输入 URL http://localhost:4200。您会看到该应用程序正在运行。如果单击 Home 图标,将会看到 Markets 功能区域: 图 2....应用程序目录结构 应用程序目录打开文件 app.component.html。用户单击 Markets 链接时,应用程序会调用 /markets 路径。...用户单击 Sports 链接时,应用程序会调用 /sports 路径。 图 5. 主应用程序路径 打开文件 app-routing.module.ts,如下所示。

2.2K10

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

Angular指令是什么? Angular核心功能是指令,这些属性使您可以编写 特定于应用程序HTML语法。它们本质Angular编译器DOM中找到它们时执行函数。...Angularservice()是用于应用程序业务层函数。它作为构造函数运行,并在运行时使用’new’关键字调用一次。...Angular,摘要过程称为脏检查。之所以调用它,是因为它扫描整个范围以进行更改。换句话说,它将所有作用域模型值与以前作用域值进行比较。...ng-app指令用于定义Angular应用程序,使我们可以Angular应用程序中使用自动引导。它表示Angular应用程序根元素,通常在或标签附近声明。...可以使用ng-hide指令与控制器一起轻松隐藏HTML元素,以单击按钮时隐藏HTML元素。

41.1K51

【Hybrid开发高级系列】AngularJS(一)——基础专题

开发者也可以局部使用ng-app指令,,则AngularJS脚本仅在该运行。...configFn: 模块启动配置函数angular config阶段会调用函数,对模块组件进行实例化对象实例之前特定配置,如我们常见对$routeProvider配置应用程序路由信息。...这些可以帮助模型和视图分离,但是他们两者确实是同步!任何 对于模型更改都会即时反映在视图上;任何在视图上更改都会被立刻体现在模型。         ...\scripts\test-server.bat来运行脚本,后面脚本命令运行方式类似);     2、打开一个浏览器窗口,并且转到 http://localhost:9876;     3、选择“Capture...另一个非常需要注意是,在上面的代码里面,当调用Phone服务方法是我们并没有传递任何回调函数

39280

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

标签,自动生成用于WijmoJS设计器支持任何纯前端控件组合标签。您可以省略大量不需要模块引用。 标签,对于设计器创建每个控件,均包含默认为空标记。...如果要将此代码部署到公共服务器,则可以在此处插入应用程序WijmoJS许可证密钥。这两个赋值语句标记上调用相应WijmoJS构造函数。...“属性”窗格向下滚动,找到系列属性,然后单击“显示项目”按钮将其展开。 将鼠标悬停在最新价格,然后单击出现链接。...单击后退按钮返回FlexChart设置,然后像以前一样展开系列属性。 现在单击“添加项目”链接以将图表系列添加到集合末尾。...随着趋势线添加到图表,设计器现在看起来像这样: 源视图中,生成代码以对FlexChart构造函数调用开始。 请注意axisY和legend子对象参数。

5.8K20

如何微信公众号视频保存下来

本文主题:如何合法保存微信公众号视频 本文中,我们将重点探讨如何在合法合规前提下保存微信公众号视频。我们将介绍以下方法: 1....然而今天这种方法不仅简单而且快捷,方法如下: 1.电脑登录微信,将微信公众号链接发送到电脑(文件传输助手)。 电脑端微信上鼠标右击公众号文章,弹出菜单栏中选择使用默认浏览器打开。...2.浏览器打开公众号文章,然后鼠标右键单击页面的空白处,弹出菜单栏,选择“检查(N)”选项。 3.弹出位置选择"网络"选项。 4.以下页面中选择“媒体”选项,然后点击播放视频。...5.右侧信息栏中会出现正在播放视频信息,找到它(它后面是彩色不断变化)。 6.右键单击视频信息,并在弹出菜单栏中选择“标签打开”选项。...7.此时该视频就会在网页中被打开视频任意区域右键单击,并在弹出菜单栏中选择“将视频另存为”。 然后选择合适路径保存即可!

64410

excel常用操作大全

3.EXCEL输入“1-1”和“1-2”等格式后,将成为日期格式,1月1日和1月2日。我该怎么办? 这是由EXCEL自动识别日期格式造成。...14.如何在屏幕扩大工作空间? 从“视图”菜单,选择“全屏”命令。 15.如何使用快捷菜单?弹出菜单包括一些最常用命令,可以大大提高操作效率。...19.如何在表单添加斜线? 一般来说,我们习惯表单使用斜线,但是工作表本身不提供这个功能。事实,我们可以使用绘图工具来实现: 点击“绘图”按钮,选择“直线”,鼠标将变成一个十字。...“工具”菜单中选择“选项”命令,然后选择“自定义序列”选项卡,并在输入框输入序列。请注意在序列第2项之间输入带半角符号逗号来分隔它们(例如:张三,李四,王二.)...众所周知,工作簿复制工作表方法是按住Ctrl键,并将选定工作表沿标签线拖到位置。复制工作表以“源工作表名称(2)”形式命名。例如,如果源表是ZM,则其克隆表是ZM(2)。

19.1K10

Python 自动化指南(繁琐工作自动化)第二版:十二、网络爬取

调用webbrowser.open()函数打开网络浏览器。 打开一个文件编辑器选项卡,并将其保存为mapIt.py。...通过击一个搜索结果链接(或者在按住CTRL同时点击),我会在一堆标签打开前几个链接,以便稍后阅读。...找到每个搜索结果链接调用webbrowser.open()函数打开网络浏览器。 打开一个文件编辑器选项卡,将其另存为searchpypi.py。...循环每次迭代,使用webbrowser.open() Web 浏览器打开一个标签。...类似程序创意 标签式浏览好处是你可以很容易地标签打开链接,以便以后阅读。一个同时自动打开几个链接程序可能是执行以下操作一个很好快捷方式: 亚马逊等购物网站搜索后,打开所有产品页面。

8.6K70

二进制程序分析指南

IDA打开可执行文件后,第一步是熟悉可执行文件基本属性——字符串、函数、导入、导出表、name。...导入函数:从外部链接库加载并且样本文件使用API函数列表。API函数是一种被定义代码,程序无需在其代码实现即可调用它。...x64dbg打开可执行文件后,地址’ 0x004010D5 ‘(IDA中找到,函数调用地址)设置一个断点: 右键单击代码区域,选择“Go to”>“Expression”(或按CTRL+G)...关闭防御机制操作步骤如下: 1)模块间调用确定’ IsDebuggerPresent ‘函数位置(右键单击> ‘搜索’ > ‘当前模块’ > ‘模块间调用’)并双击它。...2)在要替换做标记并按空格键(或 ‘ Assemble ‘行右击)。 3)将出现一个带有原始指令窗口。用必需指令(本例是’ nop ‘)重写原始指令,然后单击OK。

1.9K10

在生产环境调试 Angular 应用程序而不显示源映射

生成 JavaScript 包尽可能小,并且能够浏览器运行。 所有这些概念都很棒,因为它们提高了我们应用程序性能。但是,这也给生产系统故障排查带来了一些困难。...源映射帮助我们开发工具显示我们原始源。 我们现在可以打开app.component.ts并在changeTitle函数内放置一个断点。通过单击“更改标题”按钮,我们然后点击了我们断点。...ng build --prod 该 dist 文件夹现在包含没有 source map 捆绑文件。让我们切换到该dist文件夹并在 HTTP 服务器运行该应用程序,以了解它在生产中外观。...在生产模式下,没有来源,也没有可供点击 Webpack 菜单项。 我们在哪里设置断点?我们需要手动转换后 JavaScript 文件中找到我们函数,这很麻烦。...因此,打开开发工具并右键单击main[hash].js. 现在输入上面脚本生成源映射路径。 必须按以下方式添加路径:file///pathToFile.

3.6K20

python Tutorial

阅读完本tutorial估计耗时: 25 分钟       本tutorial 目标就是了解如何在IronPython创建 delegates 和事件处理代码, 以及通过Windows 窗体和WPF...Tutorial 路径,然后创建一个文件 ("Created" 事件),  在记事本编辑并保存该文件("Changed" 事件)然后删除该文件 ("Deleted" 事件).        ...Task 3: Python 定义事件 最后,再看一下如何在Python代码获取事件处理语法(event handler ): pyevent - 该模块提供Python事件支持 make_event...然后运行calculator对象模型 (函数被定义avalon.py 文件) for n in Walk(w): print n 使用Python's 列表语法,我们能够获得 calculator...感兴趣朋友可以通过EMAIL或在回复与我联系。 Tag标签: python,daizhj

1.6K50

Visual Studio 调试系列3 断点

设置条件和操作、 添加和编辑标签,或将断点导出,右键单击该和选择合适命令,或将鼠标悬停其,然后选择设置图标。...02 调用堆栈窗口中设置断点 若要中断指令或调用函数返回到行处,可以设置断点调用堆栈窗口。 调用堆栈窗口中设置断点: 若要打开调用堆栈窗口中,您必须在调试期间暂停。...调用堆栈左边距函数调用名称旁边会显示一个断点符号。 调用堆栈断点显示断点窗口具有对应于函数下一步可执行指令内存位置地址。 调试器指令处中断。 ? ?...选择调试 > 断点 > 函数断点,或按Alt +F9 > Ctrl+B。 您还可以选择新建 > 函数断点中断点窗口。 中新函数断点对话框,输入函数名称函数名称框。...断点标签 可以使用标签进行排序和筛选列表断点断点窗口。 1、若要将标签添加到断点中,右键单击该断点源代码或断点窗口中,并选择编辑标签。 添加标签或选择一个现有证书,然后选择确定。

5.2K20

Excel表格35招必学秘技

1.执行“格式→选项”命令,打开“选项”对话框,进入“自定义序列”标签“输入序列”下面的方框输入部门排序序列(“机关,车队,一车间,二车间,三车间”等),单击“添加”和“确定”按钮退出。...二、建立“常用文档”菜单   菜单栏新建一个“常用文档”菜单,将常用工作簿文档添加到其中,方便随时调用。   1.工具栏空白处右击鼠标,选“自定义”选项,打开“自定义”对话框(图1)。...“命令”标签,选中“类别”下菜单”项,再将“命令”下面的“菜单”拖到菜单栏。   按“更改所选内容”按钮,弹出菜单“命名”框输入一个名称(“常用文档”)。   ...2.再在“类别”下面任选一项(“插入”选项),右边“命令”下面任选一项(“超链接”选项),将它拖到菜单(常用文档),并仿照上面的操作对它进行命名(“工资表”等),建立第一个工作簿文档列表名称...3.选中“常用文档”菜单某个菜单项(“工资表”等),右击鼠标,弹出快捷菜单,选“分配超链接打开”选项,打开“分配超链接”对话框。

7.4K80

Sentry 监控 - Discover 大数据查询分析引擎

删除查询 Discover 主页,每个保存查询卡都有一个省略号,可以打开上下文菜单。从这里,您可以删除查询。这个动作是不可逆。...将鼠标悬停在栏每个部分以查看该标签的确切分布。 单击这些部分任何一个以进一步优化您搜索。...删除查询 删除已保存查询是不可逆 Discover 主页,每个保存查询卡都有一个省略号,可以打开上下文菜单。从这里删除查询。...),您可以单击 issue 名称以打开 “Issue Details” 页面并对 issue 进行分类。...然后您可以单击 “Open Group” 图标来深入查看单个事件。您还可以 “Results” 表 “Releases” 打开 release。

3.4K10

一小时内在本地搭建SAP Commerce Cloud(电商云)前后台运行环境

这个愿望当然是可以实现。SAP Commerce Cloud (电商云) 部署方式非常灵活:不仅能托管 SAP 自己基础设施 (infrastructure) ,也能架设在第三方公有云。...实际,SAP Spartacus 帮助网站上,给出了如何在本地搭建 SAP Commerce Cloud 前后台运行环境具体步骤: https://sap.github.io/spartacus-docs...将下载到本地安装包解压,按照下列文档介绍步骤, installer/recipes 文件夹内基于 cx 拷贝一个文件夹 cx-for-spa 出来,从而新建了一个基于 Spartacus 安装...进入创建好 samplestore 目录,使用下面的命令行,能够安装默认支持 B2C 功能 Spartacus Storefront: ng add @spartacus/schematics ?...ng serve 命令启用这个安装好 Angular 应用, Chrome 开发者工具 Network 标签里,能观察到 SAP Spartacus Restful API 调用。 ?

62420
领券