javascript - Angular 11: call function componet into html with generic pipe

Question

i want made a generic pipe for call a component's function into component's html.

The wrong way is eg.:

{{ test('foo') }}

my idea is:

{{ 'foo' | fn:test }}

this is the pipe code

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]);
  }
}

and this is a component example

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();
  }
}

this is a live example https://stackblitz.com/edit/angular-ivy-jvmcgz

the code seem works but is based on retrive the component instance into the pipe by private property context of ChangeDetectorRef.

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

This is unsafe and future Angular update can break this trick.

There is a safe way to access to component instance into Pipe?

question from:https://stackoverflow.com/questions/66060367/angular-11-call-function-componet-into-html-with-generic-pipe

Answer 1

Waitting for answers