web-dev-qa-db-fra.com

Comment créer un lien vers une URL externe dans Angular 2

Je suis nouveau sur Angular. Je commence par ver. 2.
Je dois créer un lien vers un file://... URL. J'ai essayé normal href:

Remarque: app est un objet modèle du Web qui traite des applications. 

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

Cela ne fonctionne pas - le lien est là, avec l'URL correcte, mais Angular semble bloquer l'événement d'une manière ou d'une autre. Pourquoi?

J'ai donc vu ng-href mais c'est pour Angular 1.x. Et il n'y a pas de *ngHref d'après ce que je peux dire. Ce n'était donc qu'un essai naïf:

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

J'ai également vu quelque chose avec le routage, mais qui ne semble être destiné qu'aux liens internes de l'application:

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

app.component.ts:

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

Comment créer un lien externe?

hyperlinkangularexternalangular2-routingangular2-directives
11
Ondra Žižka

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

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

pour ne pas rompre la liaison lorsque Angular essaie de le résoudre avant que app ait réellement une valeur.

Original Cela a fonctionné par 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 aussi bien

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

Plunker

15
Günter Zöchbauer