Как создать ссылку на внешний URL в Angular 2

Я новичок в Ангуляре. Я начинаю с вер. 2.
Мне нужно сделать ссылку на file://... URL. Я попробовал обычный href:

Примечание. app — это модельный объект сети, связанный с приложениями.

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

Как создать внешнюю ссылку?


angular hyperlink external angular2-directives angular2-routing
person Ondra Žižka    schedule 18.03.2016    source источник
comment
Вы проверили, как выглядит URL-адрес, сгенерированный в DOM? (контекстное меню на ссылке Inspect element). На самом деле app - это модельный объект сети, который имеет дело с приложениями, не дает много информации.   -  person Günter Zöchbauer    schedule 18.03.2016

Ответы (1)


arrow_upward
19
arrow_downward

Я предполагаю, что app назначен асинхронно. Вы можете обойти это с помощью оператора Элвиса:

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

чтобы не нарушать привязку, когда Angular пытается разрешить ее до того, как app действительно получит значение.

Исходный Это сработало, например:

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

Плункер

На самом деле, ваш первый пример тоже отлично работает

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

Плункер

person Günter Zöchbauer    schedule 18.03.2016
comment
Значение URL в порядке. Ссылка есть, и значение href тоже в порядке. Похоже, что Angular2 каким-то образом отбрасывает клик по этой ссылке. - person Ondra Žižka; 18.03.2016
comment
Когда вы меняете file:// на http://, ссылка работает нормально. С file:// и в консоль выводится сообщение об ошибке (не разрешено загружать локальный ресурс: file://www.google.com/index.html). Я не вижу ничего плохого в ссылке в Angular2. - person Günter Zöchbauer; 18.03.2016
comment
Я предполагаю, что это проблема браузера, а не проблема Angular. Он отлично работает с URL-адресом http://, который, ИМХО, не выглядит так, как будто Angular мешает таким ссылкам. - person Günter Zöchbauer; 18.03.2016
comment
Кажется, ты прав. stackoverflow.com/questions/5317834/ - person Ondra Žižka; 18.03.2016
comment
Таким образом, проблема описана в качестве примера в документах Angular JS (docs.angularjs.org/api/ng /directive/ngHref): ‹a href=....gravatar.com/avatar/{{hash}}›link1‹/a›, где AngularJS может не иметь возможности заменить {{hash} } с его значением до того, как пользователь нажмет на него, применимо ли оно к Angular 2? Если все еще так, использование href=...{xxx}› все равно приведет к той же проблеме. - person Francesco; 12.05.2017
comment
@Francesco, этот ответ (и вопрос) касается Angular, а не Angularjs. - person Günter Zöchbauer; 12.05.2017
comment
@Günter извините, если я недостаточно ясно задаю вопрос. Из вашего последнего комментария я понимаю, что та же проблема не влияет на Angular (как это было для AngularJS). Спасибо - person Francesco; 12.05.2017
comment
Я понимаю. Я перестал читать, когда продал ссылку docs.angularjs.org — извините. Нет, Angular2 работает по-другому. Такие привязки, как {{}}, разрешаются до добавления компонента в DOM, поэтому браузер никогда не получает {{}}. Если вы используете компиляцию AoT, эти привязки разрешаются еще до того, как что-либо будет загружено в браузер. - person Günter Zöchbauer; 12.05.2017
comment
примечание: '?' это не оператор Элвиса - это необязательный оператор цепочки - person Lord Midi; 07.10.2018
comment
Никогда не слышал этого имени. Только Элвис или сейф-навигация. У вас есть ссылка на документы TS, где оно используется в качестве официального имени? - person Günter Zöchbauer; 07.10.2018