Как связать два свойства в Angular

Question

Я пытаюсь поэкспериментировать с угловыми привязками, я застрял в странной ситуации .. Мне нужно связать два свойства - здесь «code» и «title» - это свойства привязки

<app-title-component fxFlexFill [title]="code + title"></app-title-component>

Этоработает отлично!Я получаю значение объединенного кода и значение заголовка на экране.

Теперь я хотел, чтобы между двумя привязываемыми свойствами был статический текст. Скажем, я хочу, чтобы результатом было

CodeValue - CodeTitleЗначение

Как это сделать?Есть ли способ сделать привязку, используя интерполяцию строк?

Answer 1

Вы можете просто определить геттер в своем компоненте следующим образом:

class FooComponent {
  title:string;
  code:string;
  get formatedTitle(){return `${this.code} - ${this.title}`;}
}

<app-title-component fxFlexFill [title]="formatedTitle"></app-title-component>

Answer 2

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

<app-title-component fxFlexFill [title]="code + ' - ' + title"></app-title-component>

во-вторых, вы можете использовать интерполяцию строк, выглядящую так.Обязательно используйте обратную галочку (`) для этой интерполяции, иначе она будет проигнорирована.

<app-title-component fxFlexFill [title]="result"></app-title-component>

в вашем шаблоне

public get result(): string
{
    return `${this.code} - ${this.title}`;  
} 

Вот статья, в которойКак Angular может справиться с интерполяцией строк .