如何在 Angular 2 中创建外部 URL 的链接

2023-12-31

我是 Angular 的新手。我从版本开始。 2.
我需要链接到file://...网址。 我试过正常href:

Note: app是处理应用程序的网络模型对象。

<a target="_blank" href="file://{{app.outputPath}}/index.html">no link here</a>.

这是行不通的——链接在那里,URL 正确,但 Angular 似乎以某种方式阻止了该事件。为什么?

所以我见过ng-href但这是针对 Angular 1.x 的。和没有*ngHref https://angular.io/docs/js/latest/api/#!?apiType=Directive据我所知。所以这只是一个天真的尝试:

<a target="_blank" *ngHref="file://{{app.outputPath}}/index.html">over a directive</a>.

我还看到了一些带有路由的内容,但似乎仅适用于应用程序内的内部链接:

<a [router-link]="['/staticReport', {path: app.outputPath}]">see the report</a>.

app.component.ts:

@RouteConfig([
    ...
    {path:"/staticReport/:path", redirectTo: 'file://  ???? ' }
])

创建外部链接的方法是什么?


我假设app被分配为异步。您可以使用以下方法解决此问题埃尔维斯操作员 https://en.wikipedia.org/wiki/Elvis_operator:

<a target="_blank" href="file://{{app?.outputPath}}/index.html">no link here</a>.

当 Angular 之前尝试解析绑定时,不要破坏绑定app实际上有一个价值。

Original例如,这有效:

@Component({
  selector: 'my-app',
  template: `
  <h2>Hello {{name}}</h2>
  <a target="_blank" [href]="'file://' + outputPath + '/index.html'">no link here</a>
`
})
export class App {
  outputPath:string = 'www.google.com';

  constructor() {
    this.name = 'Angular2';
  }  
}

Plunker https://plnkr.co/edit/IvTzuJ?p=preview

实际上,你的第一个例子也很好用

<a target="_blank" href="file://{{outputPath}}/index.html">no link here</a>

Plunker https://plnkr.co/edit/pamdfw?p=preview

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在 Angular 2 中创建外部 URL 的链接 的相关文章

随机推荐

  • DelayedJob 错误:已经有一个或多个程序实例正在运行

    一些背景故事 昨晚 当delayed job工作人员正在处理图像处理作业时 我的服务器磁盘空间不足 当我尝试阻止工作人员时 我得到的答复是 已终止 RAILS ENV production script delayed job stop T
  • 如何突出显示 UIButton 子类?

    我有一个子类UIButton我覆盖的地方drawRect用于自定义外观的按钮 但现在单元格不突出显示 我怎样才能解决这个问题 我已经为按下单元格时的另一个自定义绘制矩形准备好了代码 void drawRect CGRect rect Gen
  • 为什么 scala 不推断继承特征的类型成员?

    我有一组类型 每个类型都有自己的类型成员 sealed trait FieldType type Data def parse in String Option Data object Name extends FieldType type
  • Alpha/透明度和 MTKView?

    我有一个 Metal 片段着色器 它返回一些带有 alpha 通道的透明颜色 我想在 MTKView 下显示一个 UIView 但我得到的唯一背景结果是黑色和 错误噪声 MTL渲染管道描述符 pipelineStateDescriptor
  • Paramiko 相当于管道控制和输入/输出管道

    我需要一种基于 paramiko 的轻量级文件传输方法SSH2 http en wikipedia org wiki SSH2服务器 dropbear http matt ucc asn au dropbear dropbear html
  • 在java中解析CSV

    我遇到了这种奇怪的情况 我必须水平阅读 所以我得到一个 csv 文件 其中包含水平格式的数据 就像下面这样 CompanyName RunDate 10 27 2010 11 12 2010 11 27 2010 12 13 2010 12
  • 斐波那契在 Python 中可以工作,但在 Java 中却失败

    我有这个代码用于计算fibonacci数在python 它有效并给出了预期的结果 但当我把同样的内容翻译成Java 它失败 知道这里出了什么问题吗 In python def fib3 n a b 0 1 while n gt 0 a b
  • 删除了 MacPorts,现在 Python 已损坏

    我已经从我的 Mac 10 7 5 中删除了 MacPorts 现在 Python 似乎已损坏 我正在尝试运行 scrapy 最后出现以下错误 ImportError dlopen Library Python 2 7 site packa
  • 有没有办法为 *any* 枚举声明注释属性?

    目前我正在为 Java Swing 开发一个基于注释的绑定框架 它使用JGoodies 绑定 http www jgoodies com在引擎盖下 不幸的是 我被 JRadioButton 绑定的注释所困扰 我想要做的是指定包含特殊值 枚举
  • 向打字稿声明动态原型方法

    我正在将带有几个 生成的 原型方法的 javascript 类转换为打字稿 生成的方法映射到内部对象 因此 API 对于 80 的用例来说更干净 更方便 但是 我找不到正确告诉打字稿存在哪些方法而不实际实现它们的方法 class A A p
  • Postgresql 全文搜索带撇号的单词

    我正在为 Postgresql 8 4 构建一个定制的 ispell 字典配置 并且在正确解析带有撇号的单词时遇到一些问题 Postgresql 中包含的 ispell 字典包含一个 affix 文件 其中包含一个 M SFX 规则 该规则
  • gemspec 中包含的依赖项未添加到 Rails 引擎中的资产管道中

    我正在编写一个具有一些依赖项的 Rails 引擎 我已经在 gemspec 中指定了依赖项 当我运行时引擎会找到它们bundle install 即 Gemfile lock 看起来正确 当我想在 Ruby 文件中使用该插件时 我可以这样做
  • karma.conf.js 自动文件排序?

    我有一个按功能排序的大型 angularjs 项目 我想设置单元测试 但在获取 karma conf js 文件排序设置时遇到问题 我尝试指定一个简单的 glob 模式 如 js 但我的许多模块由于运行时包含在 Karma 中的顺序而无法加
  • 打包数据类型与普通数据类型之间的差异

    在金属中 a 和 a 之间有什么区别packed float4 and a float4 此信息来自here https developer apple com library ios documentation Metal Referen
  • 单击图像时运行 Javascript

    我的网站上有以下图形按钮 a href class addto cart btn span Click here to add to cart now span a 我想在单击 当前值 时运行特定的 javascript 脚本来运行一些 j
  • 如何在 PHP 中读取从 AngularJS 发送的 POST 请求数据

    我正在尝试从我的角度 js 发出发布请求 如下所示 var postData firstName VenuGopal lastName Kakkula postData JSON stringify postData http method
  • Windows 进程激活服务 (WAS) 将无法启动

    IIS 10 不会在我的电脑上重新启动 当我导航到本地主机时 我收到 本地主机拒绝连接 消息 通过事件查看器查看后 发现问题在于 Windows 进程激活服务 WAS 无法启动 给出的错误信息是 The Windows Process Ac
  • 为什么我必须调用 NgZone.run 才能让我的视图在 Angular2 中使用 Breezejs 进行更新?

    我正在尝试学习 angular2 并使用 odata webapi 后端创建一个测试应用程序 在应用程序中 我有一个视图 它获取一系列项目 我想在我的视图中显示这些项目 为了从前端获取数据 我使用breezejs库 因为事实证明它在过去节省
  • 外键和参考键有什么区别?

    我对这两个术语非常困惑 它们是相同还是不同 有些书和人说它们是相同的 有些则说它们是不同的 我尝试过但找不到确凿的答案 我假设你正在谈论使用REFERENCES哪里的FOREIGN KEY约束内联列时不使用关键字 这称为列级外键约束 eg
  • 如何在 Angular 2 中创建外部 URL 的链接

    我是 Angular 的新手 我从版本开始 2 我需要链接到file 网址 我试过正常href Note app是处理应用程序的网络模型对象 a target blank href no link here a 这是行不通的 链接在那里 U