Angular 10: Как добавить в ссылку параметры запроса

Question

У меня есть ссылка типа

<a class="contact-email" href="mailto:cybertruck@wrapmate.com">cybertruck@wrapmate.com</a>

Мне нужно изменить href, чтобы получилось что-то вроде этого.

mailto:cybertruck@wrapmate.com?subject=Cybertruck%20Request&body=%matte%+%color%

Как добавить параметры запроса к такой ссылке ?

Answer 1

Самый простой пример c для этого - добавить selectedValue из раскрывающегося списка в конце href.

<p>
  <a [href]="'mailto:cybertruck@wrapmate.com?subject=Cybertruck%20Request&body=' + selectedValue">Send an email</a>
</p>

Вот полный HTML страницы с некоторые фиктивные данные, поступающие от компонента. Значение обновляется в ngModel, поэтому его можно использовать везде на странице.

<select [(ngModel)]="selectedValue">
  <option *ngFor="let item of items" [ngValue]="item.name">{{item.name}}</option>
</select>

<p>You selected: {{ selectedValue }}</p>

<p *ngIf="selectedValue">
  <a [href]="'mailto:cybertruck@wrapmate.com?subject=Cybertruck%20Request&body=' + selectedValue">Send an email</a>
</p>

Чтобы увидеть это в действии, следуйте this StackBlitz .