Wie erstellen Sie einen link zu externe URL in Eckige 2

Ich bin neu in Eckig. Ich bin beginnend mit ver. 2.

Ich brauche einen link zu einem file://... URL.
Ich habe versucht normal href:

Hinweis: app ist ein model-Objekt der Bahn, die sich mit Anwendungen. 

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

Nicht funktioniert - der link ist da, mit der richtigen URL, sondern Eckig scheint zu blockieren, die Veranstaltung irgendwie. Warum?

So, die ich gesehen habe ng-href aber das ist für Winkel-1.x. Und es gibt keine *ngHref was ich sagen kann. So das war nur ein naiver Versuch:

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

Ich habe auch etwas gesehen mit routing, aber das scheint bestimmt nur für internen links innerhalb der Anwendung:

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

app.component.ts:

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

Was ist der Weg erstellen Sie einen externen link?

  • Haben Sie geprüft, wie die URL aussieht, die generiert wird, in den DOM? (contexte Menü auf den link "element Untersuchen"). Eigentlich "app ist ein model-Objekt der Bahn, die sich mit Anwendungen" nicht viel.
InformationsquelleAutor Ondra Žižka | 2016-03-18
  1. 15

    Ich gehe davon aus app zugeordnet ist async. Sie können umgehen dies mithilfe der Elvis-operator:

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

    nicht brechen die Bindung, wenn Winkel versucht es zu lösen, bevor app tatsächlich einen Wert hat.

    Original
    Dies funktionierte zum Beispiel:

    @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

    Eigentlich dein erstes Beispiel funktioniert auch gut

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

    Plunker

    • Der URL-Wert ist ok. Der link ist da, und die href Wert ist auch ok. Was zu geschehen scheint, ist, dass Angular2 irgendwie verwirft das klicken auf diesen link.
    • Wenn Sie ändern die file:// zu http:// der link funktioniert gut. Mit file:// - und Fehlermeldung auf der Konsole ausgegeben (Nicht erlaubt zu laden, auf lokale Ressourcen: file://www.google.com/index.html). Ich sehe nicht, nichts falsch mit dem link in Angular2.
    • Ich denke, dies ist ein browser-Problem, nicht ein Winkel-Problem. Es funktioniert gut mit einem http:// URL, die IMHO nicht machen es so Aussehen, Eckige stört mit solchen links.
    • Scheint du hast Recht. stackoverflow.com/questions/5317834/...
    • Also die Ausgabe berichtet als Beispiel über Angular JS-Doku (docs.angularjs.org/api/ng/directive/ngHref): "<a href="....gravatar.com/avatar/{{hash}}">link1</a>", wo AngularJS vielleicht nicht die chance haben, ersetzen Sie das {{hash}} markup mit seinem Wert, bevor der Benutzer klicken Sie auf es, gibt es noch für Winkel 2? Wenn immer noch der Fall ist, mit href="...{xxx}"> würde immer noch dazu führen, dass gleiche problem.
    • diese Antwort (und die Frage) ist zu Eckig, nicht zu Angularjs.
    • sorry wenn ich die Frage stellen, nicht deutlich genug. Aus Ihrem letzten Kommentar, dann bekomme ich, dass das gleiche Problem betrifft nicht Eckig (wie AngularJS). Dank
    • Ich sehe. Ich hörte auf zu Lesen, wenn ich den Verkauf der docs.angularjs.org link - sorry. Nein, Angular2 funktioniert anders. Die Bindungen wie {{}} behoben werden, bevor die Komponente wird Hinzugefügt, um den DOM, also der browser bekommt nie {{}}. Wenn Sie AoT-Kompilierung, diese Bindungen gelöst werden, noch bevor etwas in den browser geladen.
    • nebenbei bemerkt: das"? " ist nicht die "Elvis-Operator" - es ist die "Optionale Verkettung Operator"
    • Noch nie gehört diesen Namen. Nur Elvis oder sicher-navigation. Hast du einen link zum TS-docs, wo es als offizielle Namen?

    InformationsquelleAutor Günter Zöchbauer
Schreibe einen Kommentar