TemplateRef и событие клика

Question

У меня есть общий шаблон для разных компонентов, но некоторые кнопки.Итак, я создаю общий компонент и изменяю эти кнопки с помощью ng-шаблона:

<component-common 
       [buttonTemplate]="buttonTemplate">
</component-common>

<ng-template #buttonTemplate let-element="element" let-method>
  <button (click)="method">
        element.name              
  </button>
</ng-template>

В component-common.component.ts:

export class ComponentCommonComponent {

   @Input() buttonTemplate: TemplateRef<any>;

   constructor() { }

   test() {
      console.log("test called");
   }
}

и в html:

<ng-template 
    *ngTemplateOutlet="buttonTemplate;context: {method: test(), element:element}">
</ng-template>

Проблема, которую я обнаружил, заключается в том, что «тест» вызывается все время, и я просто хочу, чтобы он вызывался при нажатии, что мне не хватает?

Answer 1

Изменить

{method: test(), element:element}

На

{method: test, element:element}

Вы не хотите вызывать метод, вместо этого вам просто нужна ссылка на метод.

Также в шаблонеВы должны использовать let-method="method" и назвать его как method():

<ng-template ... let-method="method">
  <button (click)="method()">

Демонстрация Stackblitz