如何修改Angular的ngForOf指令，从Behavior Subject获取可迭代对象？

要实现这个不需要外部传入可迭代对象、直接从指令内部BehaviorSubject获取数据的自定义ngFor指令，我们只需要对原ngForOf源码做几个核心修改，核心思路是移除Input依赖、把数据来源切换为内部Observable，并调整视图更新的触发逻辑。下面是具体的修改步骤和关键代码：

1. 移除ngForOf的Input绑定 #

原ngForOf指令通过@Input() set ngForOf(...)接收外部传入的可迭代对象，我们需要完全移除这个Input装饰器和对应的处理逻辑，替换为内部的BehaviorSubject来存储和推送数据：

// 删掉原有的@Input() ngForOf相关代码，新增内部BehaviorSubject
private _data$ = new BehaviorSubject<any[]>([]); // 可根据需求定义具体泛型
private _dataSubscription?: Subscription;

2. 调整数据订阅与视图更新逻辑 #

原指令会在Input值变化时触发视图更新，现在我们要在指令初始化时订阅自己的BehaviorSubject，把视图更新逻辑绑定到订阅回调中：

ngOnInit(): void {
  // 订阅内部数据流，数据变化时自动更新视图
  this._dataSubscription = this._data$.subscribe(data => {
    this._renderItems(data);
  });

  // 这里可以初始化数据，比如从服务获取或者模拟测试数据
  // this._data$.next(['item1', 'item2', 'item3']);
}

ngOnDestroy(): void {
  // 清理订阅和数据流，避免内存泄漏
  this._dataSubscription?.unsubscribe();
  this._data$.complete();
}

3. 复用原有的视图渲染逻辑 #

原ngForOf的_applyChanges（或类似核心方法）负责创建/销毁视图、设置模板上下文，我们可以把这部分逻辑保留，只是把触发源从Input变化改成Observable的订阅回调：

private _renderItems(items: any[]): void {
  this._viewContainer.clear();
  
  for (let index = 0; index < items.length; index++) {
    // 保持和原ngFor一致的模板上下文，这样模板里仍能使用let item; let i = index等语法
    this._viewContainer.createEmbeddedView(this._template, {
      $implicit: items[index],
      index: index,
      count: items.length,
      // 如果需要保留trackBy优化，这里也要对应调整逻辑
    });
  }
}

4. 修改指令选择器 #

原指令的选择器是[ngFor][ngForOf]，要求必须同时绑定ngFor和ngForOf，我们需要修改选择器为[ngFor]，这样用户只需使用*ngFor就能调用指令：

@Directive({
  selector: '[ngFor]' // 简化选择器，去掉ngForOf的依赖
})

5. 可选：暴露数据更新方法 #

如果需要从外部组件更新指令内部的数据源，可以添加一个公共方法：

updateItems(newItems: any[]): void {
  this._data$.next(newItems);
}

使用示例 #

现在你可以像这样使用自定义指令：

<!-- 模板中直接使用*ngFor，不需要绑定of表达式 -->
<comp *ngFor let-item let-i="index">
  {{i}}: {{item}}
</comp>

注意事项 #

• 如果需要保留原ngFor的trackBy优化功能，需要把trackBy改成内部配置或者通过Input可选传入（如果有外部定制需求的话）；
• 若要优化变更检测，可以给指令添加changeDetection: ChangeDetectionStrategy.OnPush；
• 模板上下文的字段（$implicit、index、count等）要和原ngFor保持一致，确保用户模板无需修改即可兼容。

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