将输入 ID 与 angular 中的标签绑定 4

Question

我在 Angular4 应用程序中使用 DateTimePicker 的自定义版本。它工作正常，我想解决的唯一问题是日历图标不可点击。我当前的功能是当我在 DateTimePicker 的输入字段内更改焦点时，出现下拉日历并且它工作正常。

现在我想做一个简单的用户体验更改，这样当有人点击日历图标时它也会显示下拉日历。我看过很多文章，我知道可以通过使用输入 Id 并将其绑定到属性标签中来实现。作为参考，您可以查看代码片段。

<input class="form-control"
     data-toggle="dropdown"
     aria-haspopup="true"
     aria-expanded="false"
     aria-label="Date picker"
     type="text"
     id="parentId"
     [name]="parentId"
     #dateInput
     [disabled]="isDisabled"
     (focus)="focusInput()"
     (input)="input$.next($event.target.value)">
  <label class="input-group-append btn" for="parentId">
    <span class="fa fa-calendar"></span>
 </label>

它工作正常，给我预期的结果 see this image。

现在的问题是我在输入中使用了字段 ID 的硬编码值。如果我需要使用两个 DateTimePicker，那么单击第二个日历图标也会映射到第一个。我正在寻找可以动态分配 ID 值的解决方案，就像我可以在属性标签内使用它一样。我已经通过动态获取值尝试了使用 [id] 和 [for] 的解决方案，但它没有解决问题。你可以看到代码片段。当我在浏览器上使用检查器 window 检查分配给 ID 的值时，甚至很难将动态值分配给输入 ID 和标签，但在这种情况下，单击日历图标根本不起作用。

<input class="form-control"
         data-toggle="dropdown"
         aria-haspopup="true"
         aria-expanded="false"
         aria-label="Date picker"
         type="text"
         [id]="parentId"
         [name]="parentId"
         #dateInput
         [disabled]="isDisabled"
         (focus)="focusInput()"
         (input)="input$.next($event.target.value)">
  <label class="input-group-append btn" [for]="parentId">
    <span class="fa fa-calendar"></span>
  </label>

您还可以查看 inspect window 的附件图片。在这方面的任何帮助和建议将不胜感激。

注意：我正在处理 Angular 4 个项目。

Answer 1

用了一段时间hit-and-try的方法，终于解决了问题。问题在于 Id 值。我试图使用组件获取输入 id 属性的值。问题是 id 与父 id 完全相似。所以我从父组件中检索了 id 值并修改了该值。它开始工作正常。

工作解决方案：

parentId = this.hostElem.nativeElement.id + '_id';

    <input class="form-control"
         data-toggle="dropdown"
         aria-haspopup="true"
         aria-expanded="false"
         aria-label="Date picker"
         type="text"
         [id]="parentId"
         #dateInput
         [disabled]="isDisabled"
         (focus)="focusInput()"
         (input)="input$.next($event.target.value)">
  <label class="input-group-append btn" [for]="parentId">
    <span class="fa fa-calendar"></span>
  </label>

之前我用的是

parentId = this.hostElem.nativeElement.id;

将输入 ID 与 angular 中的标签绑定 4

Binding Input id with label in angular 4

binding

datetimepicker

angular