Question

我有一个用于不同组件的通用模板，但有一些按钮。因此，我创建了一个通用组件，并使用ng-template更改了此按钮：

select A.value / B.value from MessagesProduced as A, MessagesReceived as B

在component-common.component.ts中：

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

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

和html中的

export class ComponentCommonComponent {

   @Input() buttonTemplate: TemplateRef<any>;

   constructor() { }

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

我发现的问题是“测试”一直被调用，而我只是希望在单击时调用它，我丢失了什么？

Answer 1

更改

{method: test(), element:element}

收件人

{method: test, element:element}

您不想调用方法，而只需要引用方法即可。

还在模板中，您应该使用let-method="method"并将其命名为method()：

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

Stackblitz Demo

TemplateRef和click事件

1 个答案: