在Angular项目开发中，我们经常会遇到这样的场景：组件内的变量在初始化后会被后续的业务逻辑修改，但是模板中某一部分需要始终展示这个变量最开始的值，不会因为变量的更新而发生变化。接下来就介绍几种实现这个需求的方法。
方法一：初始化时保存初始值副本
这是最直观的实现方式，在变量初始化完成后，立刻把初始值保存到一个单独的属性中，模板中绑定这个保存初始值的属性即可。
实现步骤
- 在组件类中声明两个属性，一个用于存储当前变量，一个用于存储初始值
- 在变量初始化完成后，将初始值赋值给初始值属性
- 模板中绑定初始值属性，而不是原变量
代码示例
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-demo',
template: `
<p>当前变量值：{{ currentValue }}</p>
<p>固定初始值：{{ initialValue }}</p>
<button (click)="updateValue()">修改当前值</button>
`
})
export class DemoComponent implements OnInit {
currentValue: string = '';
initialValue: string = '';
ngOnInit() {
// 初始化当前变量
this.currentValue = '初始内容';
// 保存初始值副本
this.initialValue = this.currentValue;
}
updateValue() {
// 修改当前变量，不会影响初始值
this.currentValue = '修改后的内容';
}
}
方法二：使用不可变数据绑定
如果变量是对象类型，我们可以通过Object.freeze方法冻结初始对象，这样后续对对象的修改不会生效，模板中绑定的对象就会始终显示初始状态。
注意事项
Object.freeze只能冻结对象自身的属性，无法冻结嵌套对象的属性- 冻结后的对象不能被新增、删除或修改属性，修改操作在严格模式下会报错
代码示例
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-demo2',
template: `
<p>用户初始名称：{{ userInfo.name }}</p>
<p>用户初始年龄：{{ userInfo.age }}</p>
<button (click)="updateUserInfo()">修改用户信息</button>
`
})
export class Demo2Component implements OnInit {
userInfo: any;
ngOnInit() {
// 初始化对象并冻结
this.userInfo = Object.freeze({
name: '张三',
age: 20
});
}
updateUserInfo() {
// 冻结后的对象修改无效，模板内容不会改变
this.userInfo.name = '李四';
this.userInfo.age = 25;
}
}
方法三：调整变更检测策略
Angular默认的变更检测策略是Default，会在每次异步事件后检查所有组件的绑定。我们可以将组件的变更检测策略设置为OnPush，只有当输入属性变化或者组件触发异步事件时才会检测，结合初始值的单独存储，也能实现固定显示的效果。
实现逻辑
将变更检测策略设为OnPush后，组件内部的变量修改不会触发变更检测，除非我们手动标记。这样初始值属性如果没有被手动更新，模板就会一直显示初始值。
代码示例
import { Component, OnInit, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
@Component({
selector: 'app-demo3',
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<p>固定初始值：{{ initialValue }}</p>
<p>当前值：{{ currentValue }}</p>
<button (click)="updateValue()">修改当前值</button>
`
})
export class Demo3Component implements OnInit {
currentValue: string = '';
initialValue: string = '';
constructor(private cdr: ChangeDetectorRef) {}
ngOnInit() {
this.currentValue = '初始内容';
this.initialValue = this.currentValue;
}
updateValue() {
this.currentValue = '修改后的内容';
// 手动触发变更检测更新当前值，初始值不会被更新
this.cdr.markForCheck();
}
}
方法对比
下面通过表格对比三种方法的适用场景和优缺点：
| 方法 | 适用场景 | 优点 | 缺点 |
|---|---|---|---|
| 保存初始值副本 | 所有类型的变量 | 实现简单，兼容性好，无额外限制 | 需要多声明一个属性 |
| 不可变数据绑定 | 对象类型变量 | 无需额外声明属性，利用语言原生特性 | 仅对对象有效，冻结后无法修改对象属性 |
| 调整变更检测策略 | 对性能有要求的场景 | 减少不必要的变更检测，提升性能 | 需要理解变更检测机制，实现相对复杂 |
总结
在Angular模板中固定显示变量的初始值，最推荐的是第一种保存初始值副本的方法，它适用性最广，实现成本最低，也不容易出问题。如果变量是对象类型，且后续不需要修改该对象的属性，也可以考虑使用Object.freeze的方式。如果对组件性能有较高要求，再考虑调整变更检测策略的方案。开发者可以根据实际的业务场景选择合适的方法。
Angular模板绑定变量初始值ngOnInitChangeDetectionStrategy修改时间：2026-07-23 02:12:27