如何将 ChangeDetectorRef 服务注入管道答案

【问题标题】：How to inject ChangeDetectorRef service into pipe如何将 ChangeDetectorRef 服务注入管道
【发布时间】：2018-02-01 10:28:14
【问题描述】：

我正在尝试将 ChangeDetectorRef 服务注入到我的管道中，但是在启动时该应用程序这是我的错误：没有 ChangeDetectorRef 的提供者！

我已经看到了几个我正在尝试做的事情的例子（翻译管道或异步管道）。但它不适用于我的......

这是我的烟斗：

import {Injectable, Pipe, PipeTransform, ChangeDetectorRef, OnDestroy} from '@angular/core';
import {Subject} from 'rxjs/Subject';
import {LangChangeEvent, TranslateService} from '@ngx-translate/core';

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

export class CollectionPipe implements PipeTransform, OnDestroy {
    value: string;
    lastKey: string;

    onLangChange: Subject<LangChangeEvent>;

    constructor(private translate: TranslateService, private _ref:   ChangeDetectorRef) {

    }

    updateValue(key: string, lang: string) {
        this.value = this.collectionTranslation(key, lang);
        this.lastKey = key;
        this._ref.markForCheck();
    }

    transform(collectionParam: string) {
        // lang parameter is just here to execute the pipe each time the current lang is changed.
        // it's not used in the pipe

        if (this.lastKey === collectionParam) {
            return this.value;
        }

        this.updateValue(collectionParam, localStorage.getItem('kia.language'));

        if (!this.onLangChange) {
            this.onLangChange = this.translate.onLangChange.subscribe((event: LangChangeEvent) => {
                if (this.lastKey) {
                    this.lastKey = null; // we want to make sure it doesn't return the same value until it's been updated
                    this.updateValue(collectionParam, event.lang);
                }
            });
        }

        return this.value;
    }

    private collectionTranslation(collectionParam: string, lang: string): string {
        let collection = '';
        if (collectionParam === null || collectionParam === undefined) {
            return '';
        }

        const coll = collectionParam.toUpperCase();
        if (lang === 'fr') {
            collection = coll.startsWith('E') || coll.startsWith('S') ? 'ETE ' : 'HIVER ';
        } else {
            // Lang EN
            collection = coll.startsWith('E') || coll.startsWith('S') ? 'SUMMER ' : 'WINTER ';
        }

        collection = collection + coll.substring(coll.length - 2);

        return collection;
    }

    _dispose(): void {
        if (typeof this.onLangChange !== 'undefined') {
            this.onLangChange.unsubscribe();
            this.onLangChange = undefined;
        }
    }

    ngOnDestroy(): void {
        this._dispose();
    }
}

对我来说，没有必要将 ChangeDetectorRef 添加到模块中，因为它是核心。

感谢您的帮助！

【问题讨论】：

标签： angular typescript pipe

【解决方案1】：

我认为您应该使用ApplicationRef 而不是ChangeDetectorRef，因为第二个仅查看特定组件中是否有更改。尝试对第一个做同样的事情。

但是，您能否将 Component.ts 文件粘贴到您有使用此管道的示例的地方？你在providers中添加了管道和探测器吗？

希望会有所帮助

【讨论】：

我需要使用 ChangeDetectorRef 来访问 markForCheck()。在我的 ts 文件中，我只是将管道添加到构造函数并调用转换方法： this.collectionPipe.transform(row.gblId);管道在模块的提供者中，但没有为检测器添加任何内容。
我也像标准管道一样使用它（{{myvar | CollectionPipe}}）
尝试在模块声明中添加带有管道的检测器
这就是我得到的：属性“提供者”的类型不兼容。键入'typeof KiaMaxValidator | typeof CollectionPipe | typeof GarmentBookingLetterService | typeof KiaA...' 不可分配给类型 'Provider'。类型“typeof ChangeDetectorRef”不可分配给类型“Provider”。类型“typeof ChangeDetectorRef”不可分配给类型“FactoryProvider”。 “typeof ChangeDetectorRef”类型中缺少属性“provide”。
别忘了你使用ApplicationRef的方式会不同于ChangeDetectorRef的使用方式：this.applicationRef.tick();