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

【问题标题】：Form label and form input in separate components单独组件中的表单标签和表单输入
【发布时间】：2019-11-08 23:15:26
【问题描述】：

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

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 不起作用。当我单击标签时，当输入位于另一个组件中时，它不会选择输入。我怎样才能让它发挥作用？

谢谢

【问题讨论】：

标签： angular

【解决方案1】：

您可以将两个组件包装成一个父组件，并可以通过单击标签发出事件来传递所需的 id 到

你的代码会是这样的

父组件.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;
  }

  }

和component1.ts会像

 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>

【讨论】：

【解决方案2】：

我通过这样做得到了这个工作：

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

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

【讨论】：

【解决方案3】：

您可以通过将 id 读取为@Input 来传递 id 属性，将其呈现给模板中的表单元素，然后在模板完成后将其从宿主元素中删除（因为 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>

【讨论】：