Angular9使用materialize-css modal时内部按钮无法识别ts方法问题

• 你使用了原生HTML的onclick属性绑定事件，该属性只会查询全局window作用域下的方法，而confirmModal是Angular组件类内部定义的实例方法，不在全局作用域中，所以触发未定义报错。
• 额外存在模板引用变量不匹配的隐患：你在TS中@ViewChild查询的是名为modal的模板引用，但是HTML中给modal div定义的引用是#myModal，二者不匹配会导致modal实例化逻辑不稳定。

1. 修正模板引用变量名，保持TS查询名和HTML定义名一致
2. 将原生onclick替换为Angular标准的事件绑定语法(click)，Angular会自动将事件绑定到当前组件实例的对应方法上

file.component.html #

<!-- 把#myModal改成#modal，和@ViewChild的查询参数匹配 -->
<div id="modal" class="modal" #modal>
   ...
   <!-- 把onclick改成(click) -->
   <button (click)="confirmModal()">confirm</button>
   <button (click)="closeModal()">close</button>
</div>

file.component.ts 无需额外修改，原逻辑可正常运行 #

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