首页
学习
活动
专区
工具
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>链接。

相关搜索:React -在同一选项卡中打开链接,然后单击新链接中的按钮如何在Ruby on Rails ActiveAdmin的新标签中打开CSV,PDF下载链接?在新选项卡中打开按钮上生成的链接右键单击网站上的链接时,缺少“在新选项卡中打开链接”选项通过右键单击并选择“在新选项卡中打开链接”在新选项卡中打开链接是不起作用的(Selenium)如何在web浏览器中单击链接(如myprogram://a/a)时打开我的电子程序如何在单击网站上的链接时停止在新选项卡中打开网页如何使用angular在浏览器的新标签页中实现打开链接?当用户点击“在新标签中打开”时,如何重定向iframe中的链接?单击WebView上的链接,然后在浏览器中打开该url->:在Flutter Browser上下文菜单上单击鼠标右键,然后在新选项卡中打开链接将文本替换为在新选项卡中打开的可单击文本链接ANGULAR:在自定义指令中单击时未调用的链接函数如何使用Selenium和Python在新选项卡中打开新链接(单击网页中的元素后生成)?在新选项卡中打开的链接点击上的Adwords转换跟踪在Java和C#中的新行上记录函数调用如何使表格中的整行表现为ngtable (angularjs)中的超链接(在新标签中打开等)单击webview上的链接时,如何在另一个webview中打开它?如何在单击slack中的链接时在同一选项卡中打开url如果单击在新选项卡中打开一个链接,我可以使onclick函数不执行吗?
相关搜索:
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

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

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

3.5K40

如何使用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.2K20
  • 教程| 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

    【PowerDesigner】创建和管理CDM之新建实体

    NG-CRM5.5逻辑模型 树形模型管理器,右键单击新建CDM工程名,从出现菜单中选择New->Package即可新建一个包(Package)。...Package用于对一个CDM工程图表按照业务等规则分类存放,NG-CRM5.5数据模型分为客户域、用户域、帐户域等多个域 树形模型管理器,右键单击新建Package名,从出现菜单中选择New...,即添加了一个实体 双击新建实体,打开实体属性窗口,输入实体名称(Name)和代码(Code) 双击新建实体,打开实体属性窗口,切换到Attributes标签页,单击属性窗口工具栏Add a...考虑到主键外键名称可能冲突问题,默认两个不同实体不能存在相同名称属性,但在实际设计时候,为了便于理解,通常需要在两个实体中使用相同属性名,NG-CRM5.5所有信息(INFO)表都存在4个字段...若要更改实体属性列表显示相关选项可以通过单击工具栏Customize Columns and Filter工具打开Customize Columns and Filter窗口,列表中选择需要显示项目即可完成设置

    20610

    【PowerDesigner】创建和管理CDM之新建和使用域

    创建和管理CDM ​​​​​​2.1 新建CDM 选择菜单栏File->New,打开New窗口 左边模型类型(Model type)列表,选中Conceptual Data Model,单击“确认...NG-CRM5.5逻辑模型 树形模型管理器,右键单击新建CDM工程名,从出现菜单中选择New->Package即可新建一个包(Package)。...Package用于对一个CDM工程图表按照业务等规则分类存放,NG-CRM5.5数据模型分为客户域、用户域、帐户域等多个域 树形模型管理器,右键单击新建Package名,从出现菜单中选择New...,设置Data Type,点击OK,一个域就创建完成了 CDM中使用域,如用户停机实体,属性应收费用与钱有关,只要对应RowDamain列下拉框中选中新建域(钱),则Data Type字段值自动调整为...通过实际操作,掌握了如何在不同实体和属性应用这些预定义域,从而提高了数据建模效率和规范性。

    13110

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

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

    41.4K51

    【PowerDesigner】创建和管理CDM之使用实体间关系

    创建和管理CDM ​​​​​​2.1 新建CDM 选择菜单栏File->New,打开New窗口 左边模型类型(Model type)列表,选中Conceptual Data Model,单击“确认...NG-CRM5.5逻辑模型 树形模型管理器,右键单击新建CDM工程名,从出现菜单中选择New->Package即可新建一个包(Package)。...Package用于对一个CDM工程图表按照业务等规则分类存放,NG-CRM5.5数据模型分为客户域、用户域、帐户域等多个域 树形模型管理器,右键单击新建Package名,从出现菜单中选择New...使用联系 CDM,联系是用实体间一条线来表示,联系具体含义是通过线两端符号 来表示两个实体间创建联系步骤如下: 工具面板左键单击联系(Relationship)工具 实体A单击鼠标左键...CDM创建继承操作如下: 工具面板左键单击继承(Inheritance)工具 子类实体单击鼠标左键,按住不放,拖拽鼠标到父类实体后才松开,这样就建立了父子实体之间Inheritance关系

    20510

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

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

    53880

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

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

    5.9K20

    Angular v18 现已推出!

    单击按钮将调用该方法,该方法将更新信号值并更新 UI。...与此同时,我们还用 Material 3 主题和文档刷新了 material.angular.io。您可以我们指南中找到如何在应用程序中使用 Angular Material 3!...而不是像今天这样服务器渲染@placeholder块,您将能够启用一种模式,让 Angular 服务器渲染@defer块主要内容。...由于 webpack 不在构建系统关键路径,我们将对 webpack 依赖设置为可选,这使我们能够将 Angular CLI 依赖项总数减少 50% 以上!...此更改将加快您 Angular CLI 安装时间。路由重定向作为函数为了处理重定向时实现更高灵活性, Angular v18 ,redirectTo 现在接受返回字符串函数

    22610

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

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

    1.8K10

    excel常用操作大全

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

    19.2K10

    二进制程序分析指南

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

    2.1K10

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

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

    8.7K70

    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.7K50

    Visual Studio 调试系列3 断点

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

    5.4K20

    IntelliJ IDEA 2022.2.2汉化版免登陆账号「winmac」

    对于每个更改列表,IDE将在“ 合并冲突”节点下对此类文件进行分组。单击“ 解决操作”链接打开“ 与冲突合并文件”对话框。...无需再手动设置特定断点属性 - 只需按Alt + Enter键,IDE将为您提供断点意图以及所有其他可用意图。- 能够过滤调用方法命中断点。...6、组态- 项目配置IntelliJ IDEA ,您可以添加存储库时排除某些传递依赖项。单击库属性编辑器配置操作链接。...- 与Angular CLI集成IntelliJ IDEA 2019,由于与ng add集成,您可以为Angular应用程序添加新功能。...您可以通过从过程上下文菜单中选择“ 执行”操作来运行过程,也可以在打开源代码时单击工具栏“运行”按钮来运行过程。

    4.7K30
    领券