直接从角度模板更改变量值是一种好习惯吗答案

【问题标题】：Is it a good practice to change variable value directly from angular template直接从角度模板更改变量值是一种好习惯吗
【发布时间】：2022-11-27 17:59:54
【问题描述】：

我在组件中有一个变量：

showModal: boolean

这在模板中：

<div (mouseover)="handleHover('hover')">

handleHover() 更改showModal 的值。

我应该使用 handleHover() 类型的函数并指向 (mouseover) 还是可以这样做？

<div (mouseover)="this.showModal = true"">

【问题讨论】：

我处理后面代码中的变量更改。更清洁。

标签： angular

【解决方案1】：

当谈到角度时，如果您遵循template-driven-forms 方法，最好使模板尽可能简单。我假设您正在遵循模板驱动的表单方法。因此，最好通过组件本身进行分配。

两种方式都可以，但为了一致性和干净的可维护代码，我鼓励您遵循 handleHover() 类型函数并将 (mouseover) 事件指向特定函数并完成其余的工作。

为了进一步阐明这些 Angular 问题，我强烈建议遵循 A角度风格指南中提到的最佳实践角度风格指南在官方 Angular 文档中 here。

【讨论】：

【解决方案2】：

我个人认为，在handleHover() 的唯一目的是设置变量showModal 的情况下，直接分配给模板中的showModal 变量是很好的，甚至更好。

阅读模板时，可以清楚地看到只发生了一个简单的赋值，而使用函数会引入需要查阅 .ts 文件以了解正在发生的事情的小开销。它还完全绕过了对 handleHover() 的需求（想象一下，如果您需要 handlePrimaryBtnHover()、handleSecondaryBtnHover()、handleSecondaryBtnClick() 等，如果所有这些功能都在更新单个变量，那么这将如何扩展）。

虽然这是次要的，但 handleHover() 方法当然也不错。

我会说 handleHover() 可能是首选

它包含 >1 行代码，例如

handleHover() {
  this.showModal = true;
  this.showModalSubject.next(this.showModal)
}

该函数需要在同一模板的许多不同位置引用（尽管我仍然认为 showModal = true 对于此用例而言更具可读性/简洁性）
您想显式测试处理 showModal 分配的 TypeScript 方法

注意：从模板中引用变量时不需要包含this

<div (mouseover)="showModal = true">

【讨论】：