Question

我需要一些指导。我正在使用有角度的材料设计框架来创建一些组件。诸如“ app-email”，“ app-phone”，“ app-bla” ...

对于应用电话，我的第一次尝试是：

<mat-form-field class="float-auto">
   <input matInput [placeholder]="placeholder"
     class="form-control"
     mask="(00) 0000-0000"
     [ngModel]="value">
    <mat-icon matSuffix>phone</mat-icon>
</mat-form-field>

这很好用，并在输入中显示电话图标。

但是我需要破解“ placeholder”属性，以便可以在我的组件中使用它：

<app-phone placeholder="Phone" formControlName="phone"></app-phone>

为了避免这种情况，我需要做些什么而不松开包装的“ mat-form-field”？

Answer 1

您可以在组件中输入占位符，然后将其绑定到html占位符

<!-- <app-phone placeholder="Phone" formControlName="phone"></app-phone> -->

<app-phone  phoneInputData="dataObject" formControlName="phone"></app-phone>

因此现在在app-phone componnent.ts中，您可以使用@Input() placeholder:string，然后将其绑定到app-phone.component.html中

@Input phoneInputData:Object;

<!--  using [placeholder]="{{placeholder}}" binding  -->
<!-- <mat-form-field class="float-auto">
   <input matInput [placeholder]="{{placeholder}}"
     class="form-control"
     mask="(00) 0000-0000"
     [ngModel]="value">
    <mat-icon matSuffix>phone</mat-icon>
</mat-form-field>
-->

<mat-form-field class="float-auto">
   <input matInput [placeholder]="{{phoneInputData.placeholder}}"
     class="form-control"
     mask="(00) 0000-0000"
     [ngModel]="value">
    <mat-icon matSuffix>phone</mat-icon>
</mat-form-field>

扩展角形材料组件的更好方法

1 个答案: