Как использовать угловую переменную в теге <a>

Question

В моем компоненте я подписываюсь на некоторые базовые данные:

ngOnInit() {
    this.data.getBasics().subscribe(
      data => {
        this.basics = data
      }
    )
  }

Я использую их в html следующим образом:

<h1>{{ basics.surname }}</h1>

, и он прекрасно работает.Некоторые из основ являются ссылками.Предположим, что basics.mypage равен "http://mypage.com".. Я хотел бы использовать его в качестве href в моем HTML-документе. Примерно так:

<a href={{ basics.mypage }}>Go to my page</a>

, но таким образом он отправляет меня на

http://localhost:4200/%7Bbasics.mypage%7D

Как использовать эту переменную внутри тега?

Answer 1

Всегда добавляйте свои абсолютные внешние ссылки с протоколом или // ярлыком для http: // ИЛИ https: // в зависимости от протокола вашего приложения.

<div class="inline-icon-text">
<small class="text-muted d-md-none mr-3">Link</small>
 <a [attr.href]="'//' + candidate.url" target="_blank" [title]="candidate.url">
<i class="material-icons">open_in_new</i>
 </a>
</div>

Браузеры по умолчанию обрабатывают URL-адреса как относительные, чтобы упроститьнавигация в приложении.

В качестве примечания: это поведение не относится к Angular;другие фреймворки и простые сайты ведут себя точно так же.Это также отличный способ сделать это.

Answer 2

Просто вставьте {{basics.mypage}} в кавычки

<a href="{{basics.mypage}}">Go to my page</a>

Answer 3

Также доступен другой способ, называемый привязкой свойства.

<a [href]="variableName"></a>

or

<a [attr.href]="variableName"></a>

Answer 4

Используйте это вместо этого.

<a ng-href={{basics.mypage}}>Go to my page</a>

Это то, что я могу получить из Angular API здесь: Angular ngHref

Answer 5

Используйте ng-href :

<a ng-href={{ basics.mypage }}>Go to my page</a>

или убедитесь, что данные правильно отформатированы.