表单标签和表单输入在单独的组件中

Question

我在一个组件中有一个表单标签，在一个单独的组件中有其相关的可重用自定义输入。我这样设计它是因为有时我想要一个带有自定义输入的标签，有时我不想要。有时我希望标签位于自定义输入之上，有时我希望它与自定义输入内联。因此，单独的组件是有意义的。它看起来像这样(尽管父组件中的标记可能会有所不同(：

component1.component.html:

<label for="myInput">Label Text</label>
<app-component2></app-component2>

component2.component.html

<input id="myInput" ... loads of custom stuff here>

唯一的问题是label for和input id不工作。当我单击标签时，当输入在另一个组件中时，它不会选择输入。我怎样才能让它工作？

感谢

Answer 1

您可以将两个组件封装到父组件中，并可以通过将标签单击到

您的代码将类似

Parentcomponent.html

<parentComponent>
<component1 (emitId) ='setLabelId($event)'></component1>
<component2 [labelId]='labelId'></component2>
</parentComponent>

而parentComponent.ts将是

export class parentComponent implements OnInit {
const labelId : string;
constructor() { }
ngOnInit() {
}
setLabelId(id:string){
this.labelId = id;
}
}

组件1.s将类似

export class Component1 implements OnInit {
@Output() emitId = new EventEmitter<string>();
constructor() { }
ngOnInit() {
}
handleLabelClick(id:string){
this.emitId.emit(id);
}
}

component1.html

<label onClick="handleLabelClick(myInput)" for="myInput">

其中component2.ts将类似

export class Component2 implements OnInit {
@Input() labelId:string
constructor() { }
ngOnInit() {
// this.labelId holds the value of required id
}
}

和component2.html

<input id="myInput" ... loads of custom stuff here>

Answer 2

我通过这样做做到了这一点：

<label>
<span>Label Text</span>
<app-component2></app-component2>
</label>

其中app-component2包含输入元素。

Answer 3

您可以中继id属性，方法是将id读取为@Input，将其呈现到模板中的表单元素，然后在模板启动后将其从宿主元素中删除(因为html id需要是唯一的(。

export class Component2 implements AfterContentInit {
@Input() id: string;
constructor(
private readonly _elementRef: ElementRef,
private readonly _renderer: Renderer2
) {}
ngAfterContentInit(): void {
// or rewrite it to another non-unique attribute
this._renderer.removeAttribute(this._elementRef.nativeElement, 'id');
}
}

在Component2模板中

<input id="{{id}}">

这允许Component1使用Component2的选择器，就好像它是一个输入元素一样。

<label for="myInput">Label Text</label>
<app-component2 id="myInput"></app-component2>