如何创建类似TranslatePipe、仅响应语言切换的自定义受限不纯管道？

我正在修改一个用于验证并转换日期格式的自定义管道，希望它能在语言切换时自动更新翻译内容。

当前的管道代码如下：

import { ChangeDetectorRef, Pipe, PipeTransform } from '@angular/core';
import { TranslatePipe, TranslateService } from '@ngx-translate/core';
import { DateTime } from 'luxon';
import { FormattingService } from '../formatting.service';

@Pipe({
    name: 'datex',
    pure: false
})

export class DatexPipe implements PipeTransform {
    translatePipe: TranslatePipe;
    constructor(private translate: TranslateService, private _ref: ChangeDetectorRef) {
        this.translatePipe = new TranslatePipe(translate, _ref);
    }
    transform(value: DateTime, format: string = FormattingService.DATETIME_FORMAT): string {
        if (!value || !value.isValid) {
            return this.translatePipe.transform('N/A');
        } else if (!DateTime.isDateTime(value)) {
            // eslint-disable-next-line no-console
            console.error(new TypeError('Provided value is of type: ' + typeof(value) + '. Required type: DateTime'));
            return '';
        }
        if (value.year < 1970) {
            value = value.plus({ years: 100 });
        }
        return value.toFormat(format);
    }
}

其中return this.translatePipe.transform('N/A');这行代码用于将"N/A"翻译成对应语言，但目前只有页面刷新或语言在页面加载前设置时才会生效。

我尝试将管道设置为不纯管道（pure: false），但这会导致管道响应所有变更检测，调用次数过多。我的目标是实现类似TranslatePipe的动态翻译效果——它虽标记为pure: false，但仅在语言切换时触发更新，而非每次变更检测都执行。

要实现这种「受限的不纯管道」，可以通过监听TranslateService的语言切换事件，手动控制管道更新逻辑，避免依赖Angular的全局变更检测。具体修改如下：

import { ChangeDetectorRef, OnDestroy, Pipe, PipeTransform } from '@angular/core';
import { TranslateService, LangChangeEvent } from '@ngx-translate/core';
import { DateTime } from 'luxon';
import { FormattingService } from '../formatting.service';
import { Subscription } from 'rxjs';

@Pipe({
    name: 'datex',
    pure: true // 改回纯管道
})
export class DatexPipe implements PipeTransform, OnDestroy {
    private langSubscription: Subscription;

    constructor(private translate: TranslateService, private cdr: ChangeDetectorRef) {
        // 订阅语言切换事件，触发管道更新
        this.langSubscription = translate.onLangChange.subscribe(() => {
            this.cdr.markForCheck();
        });
    }

    transform(value: DateTime, format: string = FormattingService.DATETIME_FORMAT): string {
        if (!value || !value.isValid) {
            return this.translate.instant('N/A'); // 直接用TranslateService获取翻译，无需实例化TranslatePipe
        } else if (!DateTime.isDateTime(value)) {
            console.error(new TypeError(`Provided value is of type: ${typeof(value)}. Required type: DateTime`));
            return '';
        }
        if (value.year < 1970) {
            value = value.plus({ years: 100 });
        }
        return value.toFormat(format);
    }

    ngOnDestroy(): void {
        // 取消订阅，防止内存泄漏
        this.langSubscription.unsubscribe();
    }
}

关键改动说明 #

• 改回pure: true：让Angular仅在输入值（value或format）变化时重新执行transform，减少不必要的调用。
• 监听语言切换事件：通过translate.onLangChange订阅语言变化，触发时调用markForCheck()手动通知管道需要更新。
• 移除TranslatePipe实例化：直接使用translate.instant()获取翻译结果，简化代码同时避免冗余实例。
• 实现OnDestroy：在管道销毁时取消订阅，避免内存泄漏。

修改后，管道会在输入值变化或语言切换时更新，既满足动态翻译需求，又不会因全局变更检测导致性能问题。

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