我创建了一个自定义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属性及其值移动到内部元素（例如，输入元素）？
我已经设法实现了自己想要的。
我已将以下代码添加到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原来的答案，因为ID属性仍然是自定义元素上了。他更新后的答案使用了非标准的passId属性而不是id。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句