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

使用content projection概念的.img-container { background-image: url("../img/photosm.jpg"); }进行尝试

输入数字模板

ng-content

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

父项

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

  <ng-content></ng-content>

</mat-form-field>

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的子组件

2 个答案: