Angular中*ngFor的trackBy函数是否必需？相关技术疑问

1. Is trackBy mandatory with *ngFor? #

Absolutely not. By default, Angular uses object reference equality to track items in an *ngFor list. This works perfectly fine for simple scenarios where your data collection doesn't change frequently, or when updates are made to existing objects (not replacing them entirely with new instances).

That said, trackBy becomes incredibly useful when you're dealing with:

• Data that's re-fetched from an API (which often returns new object references even if the data is identical)
• Large lists where frequent DOM rebuilds would hurt performance
• Collections that get filtered/sorted frequently, leading to item position changes

In these cases, using trackBy tells Angular to use a specific property (like an id) instead of object references, preventing unnecessary DOM element destruction and recreation—this is where the performance and memory benefits kick in.

2. Why isn't trackBy the default behavior? #

Great question! There are a few key reasons Angular sticks with reference tracking by default:

• Simplicity: Reference tracking requires zero extra code from developers. It's the most straightforward implementation for basic use cases.
• Flexibility: Not all collections have a natural unique identifier (e.g., temporary lists of computed values). Forcing trackBy by default would force developers to invent arbitrary identifiers, adding unnecessary complexity.
• Backward compatibility: Angular has used reference tracking since its early days, and changing the default would break existing applications that rely on this behavior.
• Performance trade-offs: While trackBy helps in specific scenarios, reference tracking is actually faster in cases where object references don't change—no extra function calls are needed to compute a track identifier.

Angular prioritizes making the common case easy, while giving developers the tools to optimize when they need to.

3. How to configure trackBy in bulk for 90 components? #

You don't have to add trackBy to each component manually—here are three scalable approaches:

Option 1: Create a reusable trackBy service

Build a shared service with a generic trackBy function that can be injected into any component:

import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class TrackByService {
  // Default track by 'id' property, fall back to index if no id exists
  trackById<T>(index: number, item: T): any {
    return (item as { id?: number | string }).id ?? index;
  }

  // Add other trackers if needed (e.g., trackByCode for items with a 'code' field)
  trackByCode<T>(index: number, item: T): any {
    return (item as { code?: string }).code ?? index;
  }
}

Then in your component templates, use it like this:

<div *ngFor="let item of items; trackBy: trackByService.trackById">
  {{ item.name }}
</div>

Just inject TrackByService into each component that needs it (or use a shared base component to avoid repeating injections).

Option 2: Build a custom *ngFor directive with built-in trackBy

Create a custom directive that extends Angular's native NgForOf and includes your default trackBy logic:

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
import { NgForOf, NgForOfContext } from '@angular/common';

@Directive({
  selector: '[ngForTrackById]'
})
export class NgForTrackByIdDirective<T> extends NgForOf<T> {
  @Input() set ngForTrackByIdOf(value: Iterable<T>) {
    this.ngForOf = value;
  }

  constructor(
    viewContainer: ViewContainerRef,
    templateRef: TemplateRef<NgForOfContext<T>>
  ) {
    super(viewContainer, templateRef);
    // Default to tracking by 'id', fall back to index
    this.ngForTrackBy = (index: number, item: T) => 
      (item as { id?: number | string }).id ?? index;
  }
}

Register this directive in your shared module, then replace all instances of *ngFor with *ngForTrackById in your templates:

<div *ngForTrackById="let item of items">
  {{ item.name }}
</div>

This way, every list using the custom directive automatically gets trackBy behavior.

Option 3: Use a base component with shared trackBy logic

Create a base component that includes your trackBy functions, then have all 90 components extend it:

import { Component } from '@angular/core';

@Component({ template: '' })
export class BaseListComponent {
  trackById<T>(index: number, item: T): any {
    return (item as { id?: number | string }).id ?? index;
  }
}

Then in your component classes:

import { Component } from '@angular/core';
import { BaseListComponent } from './base-list.component';

@Component({
  selector: 'app-my-list',
  template: `
    <div *ngFor="let item of items; trackBy: trackById">
      {{ item.name }}
    </div>
  `
})
export class MyListComponent extends BaseListComponent {
  items = [...];
}

This keeps your template code clean and centralizes trackBy logic.

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