Jak utworzyć link do zewnętrznego adresu URL w Angular 2

Question

Jestem nowy w Angular. Zaczynam od ver. 2.
Potrzebuję link do adresu URL file://.... Próbowałem normalny href:

Uwaga: app to obiekt modelu, który zajmuje się aplikacjami.

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

To nie działa - link jest tam, z prawidłowym adresem URL, ale wydaje kątowe blokować zdarzenie jakoś. Czemu?

Więc widziałem ng-href, ale to dla Angular 1.x. I z tego, co mogę powiedzieć, there's no *ngHref. Więc to był tylko naiwna próba:

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

Również widziałem coś z trasy, ale to wydaje się być przeznaczony wyłącznie do wewnętrznych połączeń w aplikacji:

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

app.component.ts:

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

W jaki sposób utworzyć link zewnętrzny?

Answer 1

Zakładam, że app jest przypisany async. Można to obejść stosując Elvis operator:

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

aby nie złamać wiązanie kątowe gdy próbuje rozwiązać go przed app rzeczywiście ma wartość.

Original To działało na przykład:

@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'; 
    } 
} 

Faktycznie, pierwszym przykładem działa dobrze, jak dobrze

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

Plunker