Angular中ngIf else模板内click事件触发报错如何解决？

问题原因 #

你遇到的报错是模板引用变量和组件类方法重名导致的作用域优先级冲突：

• 你的模板里定义了<ng-template #resume>，这里的#resume是模板引用变量，在当前模板的作用域下优先级高于组件类中定义的同名属性/方法
• 当你在模板内调用resume()时，Angular会优先匹配到这个TemplateRef类型的模板引用对象，而非你定义的resume箭头函数，调用非函数类型的对象自然会抛出is not a function的错误

解决方案 #

二选一即可：

方案1：修改模板引用变量的名称 #

将模板里的模板引用变量改为不和组件方法重名的命名，比如：

<button type="button" *ngIf="!paused; else resumeTpl" (click)="pause()">
    pause
</button>

<ng-template #resumeTpl>
    <button type="button" (click)="resume()">
        resume  
    </button>
</ng-template>

方案2：修改组件类方法的名称 #

将组件中的resume方法改为其他名称，模板中对应调用新名称即可：

class AppComponent  {
    paused = false;
    pause() {
        this.paused = true;
    }
    handleResume = () => {
        this.paused = false;
    }
}

<ng-template #resume>
    <button type="button" (click)="handleResume()">
        resume  
    </button>
</ng-template>

内容的提问来源于stack exchange，提问作者user3591367