Angular 19.1 HTML模板递归调用失效问题求助

问题场景 #

在Angular 18及更早版本中，通过以下方式实现非独立递归组件可正常运行：
组件定义代码：

@Component({
    selector: 'app-role-card-main',
    templateUrl: './role-card-main.component.html',
})

HTML模板代码：

usedConfig: {{config|json}}
... 
@for (kiddie of kids; track kiddie.data.id) {
    ~~{{kiddie|json}}**
    <app-role-card-main [config]="kiddie"/>
}

升级至Angular 19.1后，循环内的~~{{kiddie|json}}**可正常渲染，证明kiddie数据存在且循环已执行，但递归调用的子组件中首行usedConfig: {{config|json}}无数据显示，且组件未迁移为独立组件。

解决方案 #

1. 显式声明输入属性 #

Angular 19对非独立组件的输入绑定校验更严格，必须显式用@Input()装饰器定义输入属性，之前版本允许的隐式绑定在19.1中会被默认忽略：

import { Input } from '@angular/core';

@Component({
    selector: 'app-role-card-main',
    templateUrl: './role-card-main.component.html',
})
export class RoleCardMainComponent {
  @Input() config!: any; // 建议替换为实际数据类型
  // 组件其他逻辑
}

2. 确认组件在NgModule中的声明与导出 #

确保组件所属的NgModule已完成声明并导出，Angular 19强化了模块导出校验，未导出的组件递归调用时可能出现隐性绑定失效：

@NgModule({
  declarations: [RoleCardMainComponent],
  exports: [RoleCardMainComponent] // 必须导出才能在模板中递归调用
})
export class YourFeatureModule {}

3. 检查变更检测策略（若使用OnPush） #

如果组件设置了ChangeDetectionStrategy.OnPush，需确保config引用变化能触发变更检测。可尝试传递新对象引用：

<app-role-card-main [config]="{...kiddie}"/>

或在组件中注入ChangeDetectorRef，必要时手动调用detectChanges()。

4. 验证模板绑定语法 #

检查递归组件的绑定语法是否正确，Angular 19对模板语法错误容忍度降低，确认[config]拼写正确、引号为英文双引号，无格式错误。

总结 #

上述方案中，**显式声明@Input()**是最可能解决问题的核心原因——Angular 19强化了输入绑定规范，隐式输入不再被默认支持。按步骤调整后，递归组件的config数据应能正常传递和渲染。

内容的提问来源于stack exchange，提问作者LeO