Comment créer un lien vers l'URL externe dans Angulaire 2

Je suis nouveau sur Angulaire. Je commence avec ver. 2.

J'ai besoin de créer un lien vers un file://... URL.
J'ai essayé normal href:

Remarque: app est un objet du modèle du web qui traite les demandes. 

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

Qui ne fonctionne pas - le lien est là, avec la bonne URL, mais Angulaire semble bloquer l'événement en quelque sorte. Pourquoi?

Donc, j'ai vu ng-href mais c'est Angulaire 1.x. Et il n'y a pas de *ngHref de ce que je peux dire. Donc c'était juste un naïf essayer:

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

Aussi j'ai vu quelque chose de routage mais celle-ci semble être destiné uniquement pour les liens internes au sein de l'application:

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

app.component.ts:

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

Quel est le moyen de créer un lien externe?

Avez-vous vérifié que l'URL ressemble à qui est généré dans les DOM? (contexte de menu sur le lien "Inspecter l'élément"). En fait "app est un objet du modèle du web qui traite les demandes" ne fournit pas beaucoup d'informations.

OriginalL'auteur Ondra Žižka | 2016-03-18

  1. 11

    Je suppose app est attribué asynchrone. Vous pouvez contourner cela en utilisant le Elvis opérateur:

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

    pour ne pas casser la liaison quand Angulaire essaie de le résoudre avant de app a en fait une valeur.

    Original
    Il a travaillé pour exemple:

    @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

    En fait, votre premier exemple fonctionne très bien ainsi

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

    Plunker

    L'URL de la valeur est ok. Le lien est là, et la href valeur est ok aussi. Ce qui semble se produire est que Angular2 en quelque sorte les rejets de l'cliquer sur ce lien.
    Lorsque vous modifiez le file:// à http:// le lien fonctionne très bien. Avec file:// et le message d'erreur est affiché sur la console (Pas le droit de charger des ressources locales: file://www.google.com/index.html). Je ne vois rien de mal avec le lien en Angular2.
    Je suppose que c'est un problème de navigateur pas Angulaire question. Il fonctionne très bien avec un http:// URL, ce qui à mon humble avis ne pas faire ressembler Angulaire interfère avec ces liens.
    Semble que vous êtes en droit. stackoverflow.com/questions/5317834/...
    Si le problème signalé par exemple sur Angular JS docs (docs.angularjs.org/api/ng/directive/ngHref): "<a href="....gravatar.com/avatar/{{hash}}">link1</a>", où AngularJS ne pourrait pas avoir une chance de remplacer {{hash}} balisage avec sa valeur avant que l'utilisateur clique sur elle, faut-il encore s'appliquer aux Angulaire 2? Si encore le cas, à l'aide href="...{xxx}"> serait toujours pour le même problème.

    OriginalL'auteur Günter Zöchbauer