Angular 18中model()与output()无法正常使用的问题排查

开发者阿泽

2026-6-22

故障原因及解决方法

核心原因：未使用的信号被Angular摇树优化移除

Angular编译器会自动检测组件中未被使用的信号（包括model、output类型），将其视为冗余代码移除。如果你的子组件模板或逻辑中没有读取/修改test信号，也没有触发ou输出信号，编译器会认为这些信号无用，不会生成对应的绑定属性，导致父组件绑定[(test)]和(ou)时出现"找不到指令提供的属性"错误。

验证依据

你提到[in]可以正常识别，是因为父组件绑定了[in]，Angular会判定该输入信号被使用，不会对其进行摇树优化；而test和ou因在子组件内部未被使用，所以被移除。

解决方法

在子组件的模板或TypeScript代码中显式使用这些信号，让编译器保留它们：

针对test信号（model类型）：
在子组件模板test.component.html中添加读取信号值的代码：
```
<p>当前test值：{{ test() }}</p>
```
或在组件类中添加修改信号的逻辑：
```
incrementTest() {
  this.test.update(val => val + 1);
}
```
针对ou信号（output类型）：
在组件类中添加触发输出的方法，并在模板中调用：
```
emitValue() {
  this.ou.emit(42);
}
```
模板中添加触发按钮：
```
<button (click)="emitValue()">触发输出</button>
```