Как передать функцию createEmbeddedView в директиву структуры?

Question

Шаблон, в котором используется директива:

<select>
  <ng-container *range="[1998, 2016]; let num; let fn = fn">
    <option (click)="fn()" [ngValue]="num">{{ num }} {{ fn | json }}</option>
  </ng-container>
</select>

Директива:

@Directive({
  selector: "[range]"
})
export class RangeDirective {
  _range: number[];

  constructor(private vcr: ViewContainerRef, private tpl: TemplateRef<any>) {}

  @Input()
  set range(value) {
    this.vcr.clear();
    this._range = this.generateRange(value[0], value[1]);
    this._range.forEach(num => {
      this.vcr.createEmbeddedView(this.tpl, {
        $implicit: num,
        fn: submit
      });
    });
  }

  private generateRange(from, to) {
    let arr = [];
    for (let i = from; i <= to; i++) {
      arr.push(i);
    }

    return arr;
  }
}

Функция:

let submit = () => {
  alert("Submit event");
};

Моя идея состоит в том, чтобы динамическиизменить обработчик нажмите

Answer 1

Ваша проблема здесь:

(click)="fn"

должно быть

(click)="fn()"

Пример StackBlitz

Редактировать

Другая проблема, с которой вы столкнулись, заключается в том, что браузеры не генерируют события click из элементов <option>. Есть две альтернативы, о которых я могу подумать:

Опция 1 - <select> change событие:

<select #select (change)="onChange(select.value)">
  ...
  <option value="a">A</option>
  ...
</select>

К сожалению, невозможно присвоить объекты элементам <option>,поэтому этот подход вам не поможет, поскольку невозможно передать функцию в обработчик событий change, уникальный для каждой опции.

Option 2 - ngModelChange:

Thisподход должен делать то, что вы хотите:

<select ngModel (ngModelChange)="$event.fn(); onChange($event.value)">
  <option *range="[1998, 2016]; let num; let fn = fn" [ngValue]e="{ fn: fn, value: num }">{{ num }}</option>
</select>

StackBlitz Пример