ngTemplateOutlet :事件处理程序失败

Question

编辑添加的stackblitz repro :https://stackblitz.com/edit/ng-template-outlet-7ivu6e?file=app/grid/grid.component.ts

在我的组件中，我使用ngTemplateOutlet动态更改组件视图的某些部分的内容：

     <ng-template #defaultExpanderTemplate>
                <button type="button" class="btn btn-link px-0 text-left"
                    (click)="toggleRow(dataItem, 'id'); toggleButton(dataItem.id)"
                    [ngClass]="{'toggled': toggledButtons[dataItem.id]}">
                    <i class="fas fa-chevron-down mr-2"></i>
                    {{dataItem[col.displayField] || dataItem[col.field]}}
                </button>
            </ng-template>
            <ng-container [ngTemplateOutlet]="expanderTemplate || defaultExpanderTemplate"
                [ngTemplateOutletContext]="{ $implicit: dataItem }">
            </ng-container>

toggleRow和toggleButton事件处理程序是在我的组件中定义的。

现在，我定义了实际使用组件的expanderTemplate：

<my-component>
  <ng-template #expanderTemplate let-dataItem>

   <div class="color-tag" [ngClass]="dataItem.colorTag"> 
    <button type="button" class="btn btn-link px-0 text-left"
        (click)="toggleRow(dataItem, 'id'); toggleButton(dataItem.id)"
        [ngClass]="{'toggled': toggledButtons[dataItem.id]}">
        <i class="fas fa-chevron-down mr-2"></i>
        {{dataItem[col.displayField] || dataItem[col.field]}}
    </button>
   </div> 
</ng-template>
</my-component>

请注意，此模板只是在上面的defaulTemplate中使用的按钮周围添加了一个div元素。也许有更好的方法可以做到这一点？

现在，调用组件不知道事件，并且我在控制台中得到了异常：

错误TypeError: ctx_r12.toggleRow不是函数

我明白，但我该如何实现这一点呢？

Answer 1

诀窍是调用grid.toggleRow (对于其他函数也是如此)