Question

我在Angular中构建了一个名为 DimensionInputComponent 的组件，该组件旨在用作表单中的自定义表单控件。该组件具有一些自定义行为，但模板仅包含一个简单的<input>元素。

我希望这个组件既可以以普通形式重复使用，也可以使用Material重复使用。在我们的应用程序中，并非每种形式都出于各种原因使用材料（例如，当只需要基本和紧凑的形式时）。

我可以选择支持材质设计吗？

目前，该组件可以在一个不使用Material的简单形式中正常工作：

<form>
  <app-dimension-input [(ngModel)]="myData.dimension"></<app-dimension-input>
</form>

但是，它在使用时不会自动呈现为材质输入，如：

<form>
  <md-input-container>
    <app-dimension-input mdInput [(ngModel)]="myData.dimension" placeholder="Dimension"></app-dimension-input>
  </md-input-container>
</form>

我相信如果我能以某种方式将mdInput属性（如果设置）转发到组件的<input>元素，它可以工作。

Answer 1

我最终解决此问题的方法是让可重用组件具有输入开关@Input() private useMaterialDesign = false;。然后，组件必须具有两个模板，具体取决于交换机的值，如下所示：

<div *ngIf="useMaterialDesign; then material else normal"></div>

<ng-template #material>
  <md-input-container>
    <input mdInput [(ngModel)]="myData.dimension" placeholder="Dimension">
  </md-input-container>
</ng-template>

<ng-template #normal>
  <input [(ngModel)]="myData.dimension" placeholder="Dimension">
</ng-template>

现在可以在材质表单中使用此组件：

<form>
  <app-dimension-input [(ngModel)]="myData.dimension" [useMaterialDesign]="true"></<app-dimension-input>
</form>

这不是最优雅的解决方案，所以请分享是否有人有更好的解决方案，我会将其标记为答案。

如何自定义表单控件可选择支持Material？

1 个答案: