模板引用和单击事件

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()">

堆栈闪电战演示