Question

因此，我一直在尝试为输入创建自己的自定义下拉菜单，因此我创建了一个结构指令，以在要使用的输入元素下创建一个下拉列表。最好是，我想在使用指令的组件中绑定一个值，这样我就可以更新表单控件，而不必直接访问DOM。

我觉得应该有一种简单而直接的方法来做到这一点，我很可能会错过。装饰器似乎消除了从指令创建输出的可能性，并且由于将元素转换为嵌入式模板而使Elementref混乱。

我们非常欢迎任何帮助，我已经尝试解决了一段时间，但似乎找不到答案。

Plunkr：https://embed.plnkr.co/OPxSY7PKTCo1sDpksF8j/

Answer 1

我认为，满足您要求的最佳解决方案是使用ControlValueAccessor。使用这种方法，您将无需使用创建组件的指令等等（从我们的演示中可以看到）。这样，您可以创建一个组件来完成所需的所有工作。

Angular Docs说：

ControlValueAccessor在Angular FormControl实例和本机DOM元素之间建立桥梁。

这是ControlValueAccessor中StackBlitz demo的有效代码，并带有您的代码。

这是实现ControlValueAccessor下拉菜单的方式：

dropdown.component.ts ：

import { Component, HostListener, EventEmitter, ElementRef, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

const noop = () => { };

const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR: any = {
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => DropdownComponent),
  multi: true
};

@Component({
  selector: 'appDropdown',
  templateUrl: './dropdown.component.html',
  providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR]
})
export class DropdownComponent implements ControlValueAccessor {
  private _value = false;
  private isDisabled = false;
  private onTouched: () => void = noop;
  private onChange: (value: any) => void = noop;

  get value() {
    return this._value;
  }

  isShowDropdown = false;

  public clickedOutside: EventEmitter<void> = new EventEmitter<void>();
  rows = [{ name: 'One', value: 1 }, { name: 'Two', value: 2 }, { name: 'Three', value: 3 }];

  constructor(private elementRef: ElementRef) { }

  @HostListener('document:click', ['$event.target'])
  public onDocumentClick(targetElement) {
    if (!this.elementRef.nativeElement.contains(targetElement)) {
      this.isShowDropdown = false;
    }
  }

  onRowSelected(value: any) {
    this.onTouched();
    if (!this.isDisabled) {
      this.writeValue(value);
    }
    this.isShowDropdown = false;
  }

  //#region ControlValueAccessor implement

  writeValue(value: any): void {
    console.log(value);
    this._value = value;
    this.onChange(value);
  }
  registerOnChange(fn: any): void {
    this.onChange = fn;
  }
  registerOnTouched(fn: any): void {
    this.onTouched = fn;
  }
  setDisabledState?(isDisabled: boolean): void {
    this.isDisabled = isDisabled;
  }

  //#endregion ControlValueAccessor implement
}

dropdown.component.html ：

<input [value]="value">
<div *ngIf="isShowDropdown" style="position: absolute">
    <h4 style="border: 1px solid grey; padding: 5px; margin: 0px" *ngFor="let row of rows" (click)="onRowSelected(row.name)">
        {{ row.name }}
    </h4>
</div>
<button (click)="isShowDropdown = !isShowDropdown;">*</button>

最后，在 app.component.html 中使用它：

<appDropdown #inp="ngModel" name="inp" [(ngModel)]="startValue"></appDropdown>

Angular2将值绑定到结构指令

1 个答案: