如何在 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
是处理应用程序的网络模型对象.
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
是异步分配的.您可以使用 Elvis operator 解决此问题:
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屋!