将模板代码传递给 angular 中的子组件

Question

我有一个包含带有以下组件的 formGroup 的组件

<input-number placeholder="Number" formControlName="NumericValue" required></input-number>
                  <button class="infoSuffix" type="button" matSuffix mat-icon-button aria-label="info" (click)="OpenInfo()">
                <mat-icon>info_outline</mat-icon>
              </button>

输入数字是 <input type="text">

的包装器

 <mat-form-field class="full-width">
    <input
      type="text"
      ..>
      </mat-form-field>

为了让组件正确呈现，需要像这样在子组件中传递按钮：

    <input
      type="text"
      ..>
<button class="infoSuffix" type="button" matSuffix mat-icon-button aria-label="info" (click)="OpenInfo()">
                    <mat-icon>info_outline</mat-icon>
                  </button>
      </mat-form-field>

我怎样才能做到这一点？我应该只传递一个 Config 对象并渲染它，还是有更好的方法

Answer 1

尝试使用 ng-content content projection

的概念

输入号码模板

<mat-form-field>
  <input type="text" ..>

  <ng-content></ng-content>

</mat-form-field>

并在您的父组件中，投影要在子组件中呈现的模板

母公司

<input-number placeholder="Number" formControlName="NumericValue" required>
   <button class="infoSuffix" type="button" matSuffix mat-icon-button aria-label="info" (click)="OpenInfo()">
        <mat-icon>info_outline</mat-icon>
   </button>
</input-number>

Answer 2

对我来说，解决方案是在控制器中实现自定义表单字段控件，如此处所述https://material.angular.io/guide/creating-a-custom-form-field-control#-code-ngcontrol-code- 然后下面的代码工作

<mat-form-field>
<input-number placeholder="Number" formControlName="NumericValue" required></input-number>
   <button class="infoSuffix" type="button" matSuffix mat-icon-button aria-label="info" (click)="OpenInfo()">
        <mat-icon>info_outline</mat-icon>
   </button>
</mat-form-field>

将模板代码传递给 angular 中的子组件

Pass template code to child component in angular

angular

angular-material2

angular-forms