时间戳

首页 > 解决方案 > TemplateRef 和点击事件

angular - TemplateRef 和点击事件

问题描述

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

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

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

标签： angularangular5ng-template

解决方案

改变

{method: test(), element:element}

至

{method: test, element:element}

您不想调用该方法，而只需要方法的引用。

同样在模板中，您应该使用let-method="method"并将其称为method()：

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

Stackblitz 演示

推荐阅读