javascript - 将占位符和标签传递给常见的输入组件，Angular 2+

Question

我制作了一个通用的可重用输入字段组件。现在，问题是这个输入组件的占位符和标签是静态的。如何为我从中调用此组件的组件动态传递占位符和标签！

  <mat-form-field appearance="outline" class="common-location">
            <mat-label>**Search By Location**</mat-label> // {{label that i would pass}}
            <input matInput type="text" placeholder="**{{placeHolder}}**" formControlName="location" name="location" aria-label="Location" [matAutocomplete]="auto"> //placeholder that should be passed
            <mat-autocomplete #auto="matAutocomplete" [displayWith]="location">
                <mat-option *ngFor="let places of predictions" [value]="places.description">
                    <span>{{places.description}}</span>
                </mat-option>
            </mat-autocomplete>
            <mat-error>Please enter location of job.</mat-error>
        </mat-form-field>

我从外部将此组件称为：

<app-autocomplete (formReady)="addFormControl('location', $event)" [placeHolder]="Location"></app-autocomplete>

尝试发送占位符并尝试绑定对我不起作用的通用组件。

我是新手，我曾与 Ember 合作过，我知道我们可以通过与我尝试在此处传递相同的方式传递数据，然后在那里绑定相同的作品。它在 Angular 中是如何工作的？

标签： javascriptangularangular2-templateangular-components