Angular 5中如何在指令中引用动态组件的父组件

要实现父组件（DynamicFormComponent）访问通过DynamicFieldDirective创建的子组件实例，你可以直接在指令中注入父组件的实例，然后把创建好的子组件传递给父组件。下面是具体的实现步骤：

1. 修改DynamicFieldDirective注入父组件 #

在指令的构造函数中直接注入DynamicFormComponent——因为指令是在父组件的模板范围内使用的，Angular会自动解析并提供父组件实例。然后在ngOnInit中调用父组件的addField方法传递子组件实例：

import { ComponentFactoryResolver, ComponentRef, Directive, Input, OnChanges, OnInit, Type, ViewContainerRef } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { FormButtonComponent } from '../form-button/form-button.component';
import { FormInputComponent } from '../form-input/form-input.component';
import { FormSelectComponent } from '../form-select/form-select.component';
import { Field } from '../../models/field.interface';
import { FieldConfig } from '../../models/field-config.interface';
// 引入父组件
import { DynamicFormComponent } from './dynamic-form.component';

const components: {[type: string]: Type<Field>} = {
  button: FormButtonComponent,
  input: FormInputComponent,
  select: FormSelectComponent
};

@Directive({
  selector: '[dynamicField]'
})
export class DynamicFieldDirective implements Field, OnChanges, OnInit {
  @Input() config: FieldConfig;
  @Input() group: FormGroup;
  component: ComponentRef<Field>;

  constructor(
    private resolver: ComponentFactoryResolver,
    private container: ViewContainerRef,
    // 注入父组件实例
    private parentForm: DynamicFormComponent
  ) {}

  ngOnChanges() {
    if (this.component) {
      this.component.instance.config = this.config;
      this.component.instance.group = this.group;
    }
  }

  ngOnInit() {
    if (!components[this.config.type]) {
      const supportedTypes = Object.keys(components).join(', ');
      throw new Error(
        `Trying to use an unsupported type (${this.config.type}). Supported types: ${supportedTypes}`
      );
    }
    const component = this.resolver.resolveComponentFactory<Field>(components[this.config.type]);
    this.component = this.container.createComponent(component);
    this.component.instance.config = this.config;
    this.component.instance.group = this.group;
    
    // 调用父组件方法传递子组件实例
    this.parentForm.addField(this.component.instance);
  }
}

2. 修正父组件DynamicFormComponent的细节 #

父组件中的fields属性需要先初始化，否则调用addField时会报错；同时补全你代码中未完成的setDisabled方法：

import { Component, EventEmitter, Input, OnChanges, OnInit, Output } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';
import { FieldConfig } from '../../models/field-config.interface';
// 引入Field接口确保类型安全
import { Field } from '../../models/field.interface';

@Component({
  exportAs: 'dynamicForm',
  selector: 'dynamic-form',
  styleUrls: ['dynamic-form.component.scss'],
  template: `
    <form class="dynamic-form" [formGroup]="form" (submit)="handleSubmit($event)">
      <ng-container *ngFor="let field of config;" dynamicField [config]="field" [group]="form">
      </ng-container>
    </form>
  `
})
export class DynamicFormComponent implements OnChanges, OnInit {
  @Input() config: FieldConfig[] = [];
  // 初始化fields为对象，指定类型为Field的键值对
  fields: {[key: string]: Field} = {};
  @Output() submit: EventEmitter<any> = new EventEmitter<any>();
  form: FormGroup;

  get controls() {
    return this.config.filter(({type}) => type !== 'button');
  }

  get changes() {
    return this.form.valueChanges;
  }

  get valid() {
    return this.form.valid;
  }

  get value() {
    return this.form.value;
  }

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.form = this.createGroup();
  }

  ngOnChanges() {
    if (this.form) {
      const controls = Object.keys(this.form.controls);
      const configControls = this.controls.map((item) => item.name);
      controls
        .filter((control) => !configControls.includes(control))
        .forEach((control) => this.form.removeControl(control));
      configControls
        .filter((control) => !controls.includes(control))
        .forEach((name) => {
          const config = this.config.find((control) => control.name === name);
          this.form.addControl(name, this.createControl(config));
        });
    }
  }

  addField(field: Field){
    // 使用配置中的name作为存储键（假设你的FieldConfig包含name属性）
    if (field.config?.name) {
      this.fields[field.config.name] = field;
    }
  }

  createGroup() {
    const group = this.fb.group({});
    this.controls.forEach(control => group.addControl(control.name, this.createControl(control)));
    return group;
  }

  createControl(config: FieldConfig) {
    const { disabled, validation, value } = config;
    return this.fb.control({ disabled, value }, validation);
  }

  handleSubmit(event: Event) {
    event.preventDefault();
    event.stopPropagation();
    this.submit.emit(this.value);
  }

  setDisabled(name: string, disable: boolean) {
    if (this.form.controls[name]) {
      const method = disable ? 'disable': 'enable';
      this.form.controls[name][method]();
      // 可选：如果需要同步禁用子组件UI，可从fields中获取实例操作
      const fieldInstance = this.fields[name];
      if (fieldInstance) {
        fieldInstance.config.disabled = disable;
      }
    }
  }
}

关键说明 #

• 父组件实例注入：Angular的依赖注入系统会自动识别指令所在的父组件上下文，直接注入就能拿到父组件实例，无需额外配置。
• 子组件存储与访问：父组件通过fields对象存储所有动态创建的子组件，你可以通过字段名快速定位并操作对应的子组件（比如调用方法、修改属性）。
• 类型安全保障：确保Field接口包含所有子组件共有的属性（如config、group），这样在父组件中操作子组件时能获得完整的类型提示。

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