具有父组件操作的角度更改子组件模板

Question

我正在尝试创建一个子组件（它是一种形式），它出现在模态的父组件内。

表单（子组件）必须根据在父级中通过几个按钮选择的类型（每个按钮是不同的类型）进行更改。

单击按钮时，子组件必须根据在父组件中选择的类型来修改表单。窗体控件正确更改，但模板未修改。代码如下：

打开模态并调用子组件的父方法

  show(value: string){
    this.type = value;
    this.entityFormComponent.type = this.type;
    this.entityFormComponent.ngOnInit();

    // Set submitAttemp to false for the new form
    this.entityFormComponent.submitAttemp = false;

    this.contentModal.show();
  }

子组件的方法ngOnInit

  ngOnInit(): void {
    if(this.creating){
      this.entity = new Entity();
    } else {
      this.entityService.get(this.nameToEdit, this.type)
    }
    // Initialize the form and add the corresponding attributes according to the type
    this.entityForm = new FormGroup({});
    this.entityHelper.getEntityFormAttributes(this.entityForm, this.type, this.entity);
  }

到目前为止，似乎一切正确，并且每次单击父按钮时生成的表单组就足够了，但是表单的输入不会出现。它们是通过辅助方法生成的，该方法通过传递的输入的类型和属性返回true或false：

<div class="col-md-6" *ngIf="entityHelper.getEntityInputsAttributes('shadow', type)">

视图中的类型为“未定义”，但组件中的显示正确。视图为什么不能正确更新类型？我该怎么做才能更新它？

Answer 1

对于父子组件交互，建议使用Input指令。如果您使用不同类型的表单，则可以使用一个枚举。并通过向按钮添加动作来将每个枚举条目绑定到每个按钮，该动作将属性设置为其对应的类型。例如：

onClick(type: FormTypes) {
   this.formType = type;
}

您的父模板看起来像

<child-component [typeOfForm]=formType </child-component>

当提供新的formType时，您的子组件将需要执行更改，因此您需要执行类似的操作

@Input()
set typeOfForm(typeOfForm: FormType) {
   //make the necessary changes on form type change.
}

另外，避免手动执行ngOnInit函数，您的子组件标签可以用div包围，并在打字稿代码上通过布尔属性显示或不显示它，如下所示：

<div *nfIf="showForm">
   <child-component [typeOfForm]=formType </child-component>
</div>

执行此show函数只会将showForm属性设置为true。

希望这会有所帮助，有关组件交互的更多详细信息，建议您查看此文档Angular Component interaction