web-dev-qa-db-ja.com

Angular 2で外部URLへのリンクを作成する方法

私はAngularを初めて使用します。私はverから始めています。 2。
file://... URLにリンクする必要があります。通常のhrefを試しました：

注：appは、アプリケーションを扱うWebのモデルオブジェクトです。

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

それは機能しません-正しいURLでリンクはありますが、Angularは何らかの形でイベントをブロックしているようです。なぜですか？

だから私はng-hrefを見ましたが、それはAngular 1.xです。そして *ngHref はありません。単純な試みでした：

<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://  ???? ' }
])

外部リンクを作成する方法は何ですか？

hyperlinkangularexternalangular2-routingangular2-directives
11
Ondra Žižka

appが非同期に割り当てられていると仮定します。 エルビス演算子 を使用してこれを回避できます：

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

appが実際に値を持つ前にAngularがそれを解決しようとしたときにバインディングを中断しないようにします。

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

実際、最初の例も同様にうまく機能します

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

Plunker

15
Günter Zöchbauer