首页
学习
活动
专区
工具
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函数不执行吗?
相关搜索:
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

没有搜到相关的视频

领券