Question

这是一个简单的选择：

<select [(ngModel)]="..." name="..." id="..." required ...>
   <option *ngFor="let o of options" [ngValue]="o.value">{{o.label}}</option>
</select>

选项初始化如下：

class MyComponent() {
    options;
    constructor(someService: MyService) {
        this.options = someService.getAllOptions();
    }
}

到目前为止，太好了。一切正常。但是问题是我需要在各个位置使用完全相同的选项进行选择。因此，有许多组件都具有此options-Property并从我的服务中加载。我想避免很多代码重复。

显然可以选择组件，这样我就可以编写<mySelect ...>了，但缺点是，我需要传递许多其他变量，例如id，class， name，required以及可能更多的属性。因此，我希望使用一种指令解决方案，因此我可以编写<select [(ngModel)]="..." name="..." ... myDirective>，而myDirective应该仅根据需要添加选项。我该怎么办？

Answer 1

在指令中，您可以使用ElementRef参数轻松访问HTML元素，因此添加元素选项没有问题。关键是，您需要向SelectControlValueAccessor注册选项。通常，<option>元素在编译时会被角度识别，并且NgSelectOption被创建which registers itself in the constructor。由于您是动态创建该选项元素的，因此您需要手动执行此步骤：

@Directive({
    selector: '[myDirective]'
})
export class MyDirective {
    constructor(someService: MyService,
                element: ElementRef<HTMLSelectElement>,
                renderer: Renderer2,
                @Optional() @Host() select: SelectControlValueAccessor) {

        someService.getAllOptions().forEach(co => {
            const option = document.createElement('option');
            option.text = co.displayName;
            option.value = co.id;
            element.nativeElement.add(option);
            new NgSelectOption(new ElementRef(option), renderer, select); 
        });
    }
}

如何填充指令中的选择选项？

1 个答案: