将自定义组件的id属性应用于内部输入元素

时间:2018-02-20 09:15:12

标签: angular

我已经创建了一个自定义的Angular组件,它基本上是一个包含某些属性的输入元素的包装器。 我希望在单击带有 for 属性的标签元素时指向自定义组件的 id 属性来聚焦此内部输入元素。

<label for="some-id">Label text</label>
<my-custom-element id="some-id"></my-custom-element>
@Component({
  selector: 'my-custom-element',
  template: '<input type="text" />'
})

是否可以将 id 属性及其'值移动到内部元素(例如输入元素)?

2 个答案:

答案 0 :(得分:2)

您需要在自定义元素类中使用@Input(),同时更改输入名称可能有所帮助:

export class MyCustomElement {
    @Input() passedId: string;
    @Input() value: any;
    //other code here
}

然后将自定义元素中的模板更改为:

<input [id]="passedId" [value]="value" type="text" />

然后是选择器:

<my-custom-element passedId="some-id"></my-custom-element>

如果您想要2路数据绑定,请交换到ngmodel

答案 1 :(得分:2)

我设法实现了我想要的目标。

我已将以下代码添加到MyCustomElementComponent:

@Input() id?: string = ''

constructor(private _renderer: Renderer2, private _elementRef: ElementRef) { ... }

ngAfterViewInit() {
    this._renderer.removeAttribute(this._elementRef.nativeElement, 'id')
}

当然,模板变成了:

<input type="text" [id]="id" />

现在该组件适用于:

<my-custom-element id="some-id-literal"></my-custom-element>
<my-custom-element id="{{someIdVar}}"></my-custom-element>
<my-custom-element [id]="'some-id-literal'"></my-custom-element>
<my-custom-element [id]="someIdVar"></my-custom-element>

需要注意的一点是第二种情况会保留绑定,即使从自定义元素中移除了 id 属性 - 更改 someIdVar 将更新自定义元素的id属性值。 <{3}}未涵盖前两个方案,因为 id 属性也保留在自定义元素上。他更新的mast3rd3mon's original answer使用了非标准的已传递属性,而不是 id