Angular 4开发疑问：代码优先写在.html还是.ts？点击切换标志位怎么实现更优？

这两个问题都涉及到Angular开发中的关注点分离和代码可维护性，咱们一个个说清楚：

问题1：Angular 4开发中，是否应该在.html文件中编写尽可能多的代码，而非.ts文件？ #

绝对不建议这么做！Angular的设计核心就是让模板（.html）专注于展示逻辑，组件类（.ts）负责业务逻辑与数据处理，把大量代码塞进模板会带来一堆麻烦：

• 可维护性直线下降：复杂的表达式、嵌套判断堆在模板里，会让模板变得臃肿杂乱，后续修改时很难快速定位问题。
• 调试难度飙升：模板里的代码不像.ts文件那样能方便地加断点调试，出了问题排查起来特别费劲。
• 完全没法复用：模板里的逻辑很难被其他组件复用，而.ts里的方法、工具函数可以轻松在多个组件间共享。
• 违背官方最佳实践：Angular官方文档一直强调要保持模板简洁，把复杂逻辑封装到组件类、管道或指令中。

举个例子：如果模板里写了一堆嵌套的*ngIf和复杂表达式，不如把判断逻辑封装成.ts里的一个getter方法，模板里只需要调用这个方法就行，可读性和维护性都会好太多。

问题2：直接在(click)事件中赋值标志位，还是调用.ts中的changeFlag方法？ #

强烈推荐改成调用.ts里的changeFlag()方法，原因很实在：

• 扩展性拉满：如果以后需求变了——比如要新增一个标志位f5，或者点击按钮后要触发额外操作（比如发送请求、更新其他数据），你只需要修改changeFlag方法的逻辑，不用去逐个修改每个按钮的(click)绑定，减少大量重复工作。
• 模板更清爽：模板里只需要写(click)="changeFlag('f1')"，相比一长串的赋值语句，可读性高很多。
• 便于测试：你可以单独对changeFlag方法写单元测试，验证标志位的切换逻辑是否正确，而直接写在模板里的逻辑根本没法单独测试。

给你个实用的示例实现：

组件类（.ts）代码： #

f1 = false;
f2 = false;
f3 = false;
f4 = false;

changeFlag(targetFlag: 'f1' | 'f2' | 'f3' | 'f4') {
  // 先统一重置所有标志位
  this.f1 = this.f2 = this.f3 = this.f4 = false;
  // 再设置目标标志位为true
  this[targetFlag] = true;
}

模板（.html）代码： #

<button (click)="changeFlag('f1')">按钮b1</button>
<button (click)="changeFlag('f2')">按钮b2</button>
<button (click)="changeFlag('f3')">按钮b3</button>
<button (click)="changeFlag('f4')">按钮b4</button>

如果以后要加f5，只需要在ts里加f5 = false，修改changeFlag的参数类型，再新增一个按钮就行，完全不用动其他按钮的绑定代码，是不是方便很多？

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