如何通过 function 在结构指令中创建嵌入式视图？

Question

Template where directive is used:

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

Directive is:

@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;
  }
}

Function is:

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

My idea is to dynamically change handler click

Answer 1

Your problem is here:

(click)="fn"

should be

(click)="fn()"

StackBlitz Example

Edit

The other issue that you are having is that browsers do not emit click events from <option> elements. There are two alternatives that I can think of:

Option 1 - <select> change event:

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

Unfortunately it is not possible to assign objects to <option> elements, therefore this approach does not help you because it is not possible to pass a function to the change event handler that is unique to each option.

Option 2 - ngModelChange :

This approach should do what you want to do:

<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 Example