在角度模板性能中连接字符串答案

【问题标题】：Concatenating strings in angular template performance在角度模板性能中连接字符串
【发布时间】：2021-10-19 16:04:17
【问题描述】：

我想知道，如果我们将由硬编码文本和 Angular 模板中的字段值组成的字符串连接起来，这是否是一种糟糕的模式和性能问题。

即- 每次更改检测周期运行时，第一个组件是否重新运行字符串连接？它是否应该总是被第二个替换？

@Component({
    selector: 'app-example',
    template:
        `
        <div [ngClass]="'color'-colorName">
        </div>
    `
})
export class ExampleComponent {

    @Input() colorName: string;

}

@Component({
    selector: 'app-example',
    template:
        `
        <div [ngClass]="className">
        </div>
    `
})
export class ExampleComponent {
    
    className: string;

    @Input() set colorName(value: string) {
        this.className = 'color' + value;
    }

}

【问题讨论】：

标签： javascript angular typescript

【解决方案1】：

我敢说您不会在这些示例中看到任何性能差异。连接字符串非常高效。发生在模板中还是其他地方都没有关系，因为模板会被编译成非常简单的 js 代码。

我不认为预先计算该值会带来性能优势。还有更重要的性能技术，例如使用 OnPush 更改检测和代码拆分。

【讨论】：