Angular 11：使用通用管道将函数组件调用到 html 中

如何解决Angular 11：使用通用管道将函数组件调用到 html 中

我想制作一个通用管道，用于将组件的函数调用到组件的 html 中。

错误的方法是：

{{ test('foo') }}

我的想法是：

{{ 'foo' | fn:test }}

这是管道代码

import { ChangeDetectorRef,EmbeddedViewRef,Type } from "@angular/core";
import { Pipe } from "@angular/core";
import { PipeTransform } from "@angular/core";

@Pipe({
  name: "fn",pure: true
})
export class FnPipe implements PipeTransform {
  private context: any;

  constructor(cdRef: ChangeDetectorRef) {
    // retrive component instance (this is a workaround)
    this.context = (cdRef as EmbeddedViewRef<Type<any>>).context;
  }

  public transform(
    headArgument: any,fnReference: Function,...tailArguments: any[]
  ): any {
    return fnReference.apply(this.context,[headArgument,...tailArguments]);
  }
}

这是一个组件示例

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

@Component({
  selector: "my-app",template: `
    <!-- testFromPipe har a third parameter name for trigger pipe refresh -->
    PIPE: {{ "arg1" | fn: testFromPipe:"arg2":name }}<br /><br />
    <!-- wrong way for call a function nto html just for test the result -->
    HTML: {{ testFromHtml("arg1","arg2") }}<br /><br />
    <button (click)="triggerCD()">test</button>
  `
})
export class AppComponent {
  name = null;

  constructor() {
    this.triggerCD();
  }

  test(a: string,b: string) {
    // test multiple arguments anch this scope works
    return `a:${a}; b:${b}; name:${this.name};`;
  }

  testFromHtml(a: string,b: string) {
    console.log("FUNCTION");
    return this.test(a,b);
  }

  testFromPipe(a: string,b: string) {
    console.log("PIPE");
    return this.test(a,b);
  }

  triggerCD() {
    this.name = new Date().getMinutes();
  }
}

这是一个活生生的例子https://stackblitz.com/edit/angular-ivy-jvmcgz

该代码似乎有效，但基于通过 ChangeDetectorRef 的私有属性上下文将组件实例检索到管道中。

constructor(cdRef: ChangeDetectorRef) {
    this.context = (cdRef as EmbeddedViewRef<Type<any>>).context;
}

这是不安全的，未来的 Angular 更新可能会破坏这个技巧。

是否有一种安全的方法可以将组件实例访问到 Pipe 中？