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 元素。也许有更好的方法来做到这一点？

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

ERROR TypeError: ctx_r12.toggleRow 不是函数

我明白了，但是我该如何实现呢？

Answer 1

诀窍是调用grid.toggleRow（其他函数也一样）