Как поместить 2 переменных в href?

Question

Пытаюсь сделать динамическую гиперссылку и поэтому требуется поместить туда переменную.

ts:

 url1: string = 'test.com/search/q=';

html:

href="'url1' + {{user.id}}"

Данный метод не работает.

Answer 1

Angular позволяет скомбинировать два разных текстовых поля следующими способами:

<a href="{{ url + userId }}">Ссылка</a>

<a href="{{ url }}{{ userId }}">Ссылка</a>

UPD: Также можно сделать через pipe или компонент, если у вас все хранится в объекте.

ts-файл

export class AppComponent {
  user = {
    url: 'test.com',
    userId: '123s',
  };
}

html-файл

<a href="{{ user | urlGenerat }}">Ссылка</a>

pipe-файл

@Pipe({
  name: 'urlGenerat',
})
export class UrlGeneratPipe implements PipeTransform {
  transform(value: any, args?: any): any {
    return value.url + value.userId;
  }
}

Также можно сделать через отдельный компонент и передавать туда уже готовый объект:

Шаблон родителя

<user-link [user]="user"></user-link>

Шаблон дочернего компонента

<a href="{{ user.url + user.userId }}">Ссылка</a>

ts-файл:

export class UserLinkComponent {
  @Input() user;
}

При таком подходе, можно инкапсулировать всю логику внутри компонента, и она может быть гораздо сложнее.

Также, внутрь компонента с ссылками можно передавать observable в async-пайпом.

При таком подходе, можно будет реиспользовать компонент в других частях приложения.

БЛОГ НА HUSL

Как поместить 2 переменных в href?

Ответы (1 шт):