如何在Angular 2中创建到外部URL的链接 [英] How to create a link to external URL in Angular 2

问题描述

我是Angular的新手.我从ver.开始2.
我需要链接到file://... URL. 我尝试了普通的href:

I am new to Angular. I am starting with ver. 2.
I need to link to a file://... URL. I tried normal href:

注意:app是处理应用程序的Web的模型对象.

Note: app is a model object of the web which deals with applications.

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

那是行不通的-链接在那里，带有正确的URL，但是Angular似乎以某种方式阻止了该事件.为什么?

That doesn't work - the link is there, with correct URL, but Angular seems to block the event somehow. Why?

所以我看过ng-href，但这是针对Angular 1.x的.而且据我所知，没有*ngHref .所以这只是一个天真的尝试:

So I've seen ng-href but that's for Angular 1.x. And there's no *ngHref from what I can tell. So this was just a naive try:

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

我也已经看到了一些有关路由的内容，但似乎仅用于应用程序内部的链接:

Also I have seen something with routing but that appears to be intended only for internal links within the application:

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

app.component.ts:

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

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

What's the way to create an external link?

推荐答案

我假设app被分配了异步.您可以使用猫王运算符:

I assume app is assigned async. You can work around this using the Elvis operator:

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

当Angular在app实际具有值之前尝试解析绑定时，不会破坏绑定.

to not break the binding when Angular tries to resolve it before app actually has a value.

原始 例如:

@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';
  }  
}

柱塞

实际上，您的第一个示例也很好

Actually, your first example works fine as well

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

柱塞

这篇关于如何在Angular 2中创建到外部URL的链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！