TemplateRef 和点击事件

Question

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

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

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

组件中-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>

我发现的问题是"test"一直被调用，我只想在点击时调用它，我错过了什么？

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 和点击事件

TemplateRef and click event

angular

angular5

ng-template