Question

我有很多表格，其中我的所有字段都是这样：

<div class="dx-field">
                            <div class="dx-field-label">Company name</div>
                            <div class="dx-field-value">
                                <dx-text-box [(value)]="Entity.CompanyName" placeholder="Company name">

                                </dx-text-box>
                            </div>
                        </div>

我想做出一个指令，我可以将其应用于dx-text-box（第3部分组件），以将占位符属性设置为dx-field-label的内容，这样我就不必指定所有内容两次可以通过Angular方式实现吗？

Answer 1

您可以在HTML中使用模板引用来读取文本内容。

<div class="dx-field">
     <div class="dx-field-label" #label>Company name</div>
     <div class="dx-field-value">
        <dx-text-box [(value)]="Entity.CompanyName" [placeholder]="label.textContent">
        </dx-text-box>
     </div>
</div>

伪指令不能从外部更新@Input()上的<dx-text-box>绑定（至少不容易理解），但是您可以编写一个可以获取值的函数。这是将模板引用传递给组件函数的示例。

<div class="dx-field">
     <div class="dx-field-label">Company name</div>
     <div class="dx-field-value">
        <dx-text-box [(value)]="Entity.CompanyName" #inputRef [placeholder]="getLabel(inputRef)">
        </dx-text-box>
     </div>
</div>

public getLabel(inputRef: TemplateRef<HTMLElement>) {
    const parent = inputRef.elementRef.nativeElement.parentElement;
    const label = parent.querySelector('.dx-field-label');
    return label && label.textContent;
}

第三种方法是创建一个新组件，该组件同时呈现标签和<dx-text-box>，并将标签作为@Input()绑定。您必须添加双向绑定才能转发值更改。

如果<dx-text-box>是反应式表单控件，那么您必须向Google提供如何让新组件为子元素提供FormControl。我忘了该怎么做，但是您会知道是否需要它，因为反应形式将在控制台输出中显示错误。

Answer 2

您必须使用单向绑定。

在您的HTML中：

<div class="dx-field-label">{{companyName}}</div>
<dx-text-box [(value)]="Entity.CompanyName" placeholder={{companyName}}>

在您的ts文件中：

let companyName = "Company Name";

指令自动设置占位符

2 个答案: