如何在 Angular 中创建一个 link 到外部 URL 2

Question

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

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

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

那行不通 - link 在那里，URL 正确，但 Angular 似乎以某种方式阻止了事件。为什么？

所以我看过 ng-href 但那是 Angular 1.x。据我所知 there's no *ngHref。所以这只是一个幼稚的尝试：

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

我还看到了一些带有路由的东西，但它似乎只适用于应用程序中的内部 link：

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

app.component.ts:

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

如何创建外部link？

Answer 1

我假设 app 被指定为异步。您可以使用 Elvis operator:

解决此问题

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

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

原创这适用于例如：

@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

实际上，您的第一个示例也可以正常工作

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

Plunker

如何在 Angular 中创建一个 link 到外部 URL 2

How to create a link to external URL in Angular 2

external

hyperlink

angular2-directives

angular2-routing

angular