Angular 11通用模板组件如何引用父组件数据并支持变更检测？

绝对不要使用__ngContext__ #

__ngContext__是Angular框架的内部私有属性，不属于公开API范畴。它的结构、存储内容完全由Angular团队自行维护，没有任何官方文档保证其稳定性——Angular版本升级时可能会直接修改甚至移除这个属性，依赖它会导致组件在后续版本中彻底失效，属于典型的未定义行为，生产环境绝对禁止使用。

实现可随变更检测更新的父组件数据引用的规范方案 #

方案1：传递属性Getter函数 #

在配置的formFields中，不直接传父组件的属性名，而是传递一个返回该属性值的Getter函数。Angular的变更检测会在父组件属性更新时自动触发函数执行，获取最新值。

// 父组件配置
config = {
  formFields: [
    {
      label: '用户名',
      data: () => this.username // 传入获取属性的Getter函数
    },
    {
      label: '邮箱',
      data: () => this.email
    }
  ]
};

通用组件模板直接调用函数获取值：

<div *ngFor="let field of config.formFields">
  <label>{{ field.label }}</label>
  <input [value]="field.data()" />
</div>

方案2：传递父组件实例+属性名 #

如果必须通过属性名绑定，可让父组件将自身实例作为输入传递给通用组件，通过属性名动态访问。这种方式天然支持Angular变更检测，父组件属性更新时会自动同步到通用组件。

// 通用组件输入定义
@Input() config: { formFields: Array<{ label: string; data: string }> };
@Input() parentContext: any; // 接收父组件实例

父组件模板传递自身实例：

<app-generic [config]="config" [parentContext]="this"></app-generic>

通用组件模板通过属性名访问父组件数据：

<div *ngFor="let field of config.formFields">
  <label>{{ field.label }}</label>
  <input [value]="parentContext[field.data]" />
</div>

优化：可通过泛型实现类型安全，比如将通用组件定义为GenericComponent<T>，@Input() parentContext: T，避免任意类型带来的风险。

方案3：使用NgTemplateOutlet（最符合Angular设计理念） #

让父组件定义每个表单字段的渲染模板，通用组件仅负责渲染结构框架，数据绑定完全由父组件控制，天然支持变更检测，同时灵活性最高。

// 通用组件输入定义
@Input() formFields: Array<{ label: string; template: TemplateRef<any> }>;

父组件模板定义字段模板：

<app-generic [formFields]="formFields">
  <ng-template #usernameTpl>
    <input [value]="username" (input)="username = $event.target.value" />
  </ng-template>
  <ng-template #emailTpl>
    <input [value]="email" (input)="email = $event.target.value" />
  </ng-template>
</app-generic>

父组件TS配置模板引用：

@ViewChild('usernameTpl') usernameTpl: TemplateRef<any>;
@ViewChild('emailTpl') emailTpl: TemplateRef<any>;

formFields = [
  { label: '用户名', template: this.usernameTpl },
  { label: '邮箱', template: this.emailTpl }
];

通用组件模板渲染：

<div *ngFor="let field of formFields">
  <label>{{ field.label }}</label>
  <ng-container [ngTemplateOutlet]="field.template"></ng-container>
</div>

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