angular - 如何在 Angular 中绑定(bind)两个属性

Question

我正在尝试使用 Angular 绑定(bind)，我遇到了一个奇怪的情况..我需要绑定(bind)两个属性 - 这里“code”和“title”是绑定(bind)属性

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

这很好用! 我在屏幕中获取了连接代码的值和标题值。

现在我想在两个可绑定(bind)属性之间有一个静态文本 比如说，我想要的结果是

CodeValue - 代码标题值

如何做到这一点？有没有办法使用字符串插值进行绑定(bind)？

Answer 1

您可以通过两种方法获得所需的结果。从评论中提到的一个非常简单的方法开始。

<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}`;  
} 

Here is an article looking at How Angular can deal with string interpolation .