如何在Angular的HTML模板中使用Lodash？

没问题！我来给你讲清楚怎么在Angular的HTML模板里用Lodash～和AngularJS的实现逻辑不同，Angular的模板上下文绑定的是组件实例，不能直接访问全局变量，所以得按下面的步骤来：

1. 确保Lodash已安装（如果还没装的话） #

首先得把Lodash和它的类型文件装到项目里：

npm install lodash
npm install @types/lodash --save-dev

2. 在组件类中暴露Lodash实例 #

在你要使用Lodash的组件TS文件里，导入Lodash，然后把它声明为组件的公共属性，这样模板就能访问到它了：

import { Component } from '@angular/core';
// 导入整个Lodash库
import * as _ from 'lodash';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  // 把Lodash实例暴露给模板
  _ = _;

  // 示例数据
  items = [
    { name: '苹果', active: true },
    { name: '香蕉', active: false },
    { name: '橙子', active: true }
  ];
  user = { name: '张三' };
}

3. 在HTML模板中直接使用Lodash #

现在你就能在模板里像在TS文件里一样调用Lodash的方法了，举几个常见例子：

过滤数组 #

<h3>激活的水果：</h3>
<ul>
  <li *ngFor="let item of _.filter(items, { active: true })">
    {{ item.name }}
  </li>
</ul>

安全访问嵌套属性 #

避免因为属性不存在导致报错：

<p>用户城市：{{ _.get(user, 'profile.address.city', '未填写') }}</p>

防抖处理输入事件 #

不过这里要注意：尽量不要在模板里直接创建_.debounce函数（每次渲染都会生成新函数），最好提前在组件类里定义好：

// 组件类里添加
handleInput = _.debounce((value: string) => {
  console.log('输入内容:', value);
}, 300);

然后模板里直接调用：

<input (input)="handleInput($event.target.value)">

一些小建议 #

• 尽量把复杂的Lodash操作逻辑放在组件类里，模板只负责展示结果，这样既保持模板简洁，也能避免不必要的性能损耗
• 如果某个Lodash方法在模板里频繁使用，可以封装成组件的方法，比如把过滤逻辑写成组件函数，模板直接调用函数结果

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