我创建了一个自定义的Angular组件,它基本上是一个带有一些属性的输入元素的包装器。我希望在单击带有for属性的label元素时,可以聚焦此内部输入元素,该元素指向自定义组件的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属性及其'值传递给内部元素(例如输入元素)?
您需要在自定义元素类中使用@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
我成功实现了我的目标。
我已将以下代码添加到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属性的值。 mast3rd3mon's original answer没有涵盖前两个场景,因为id属性也保留在自定义元素上。他更新的answer使用非标准的passId属性而不是id。