angular - Finns det ett sätt att tillhandahålla statisk typning i ng-template let-* bindningar?

Så här är ett exempel på en mall.

komponent.ts:

  @ViewChild('valueTemplate') valueTemplate: TemplateRef<any>;

komponent.html

<ng-template #valueTemplate let-rowIndex="rowIndex" let-dataItem="dataItem">
  ***
</ng-template>

Hur kan jag tillhandahålla statisk typning och automatisk komplettering (JB WebStorm) här? Nu är både rowIndex och dataItem infererade till any ts-typ.

Svar #1

Så jag bestämde mig för att använda *ngLet-direktivet för det ändamålet, trots liten funktionsanropskostnad inuti detta direktiv.

Användning :

  asFilter(dataItem: any): Filter {
    return dataItem as Filter;
  }

<ng-template #valueTemplate let-rowIndex="rowIndex" let-dataItem="dataItem">
  <ng-container *ngLet="asFilter(dataItem) as filter">

Svar #2

Jag är författaren till https://github.com/nigrosimone/ng-let (på npm https://www.npmjs.com/package/ng-let) som stödjer statisk typning. För att skapa en egen let-direktiv med statisk typning:

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

interface NgLetContext<T> {
    ngLet: T;
    $implicit: T;
}

@Directive({
    // tslint:disable-next-line: directive-selector
    selector: '[ngLet]'
})
export class NgLetDirective<T> {

    private context: NgLetContext<T | null> = { ngLet: null, $implicit: null };
    private hasView: boolean = false;

    // eslint-disable-next-line no-unused-vars
    constructor(private viewContainer: ViewContainerRef, private templateRef: TemplateRef<NgLetContext<T>>) { }

    @Input()
    set ngLet(value: T) {
        this.context.$implicit = this.context.ngLet = value;
        if (!this.hasView) {
            this.viewContainer.createEmbeddedView(this.templateRef, this.context);
            this.hasView = true;
        }
    }

    /** @internal */
    public static ngLetUseIfTypeGuard: void;

    /**
     * Assert the correct type of the expression bound to the `NgLet` input within the template.
     *
     * The presence of this static field is a signal to the Ivy template type check compiler that
     * when the `NgLet` structural directive renders its template, the type of the expression bound
     * to `NgLet` should be narrowed in some way. For `NgLet`, the binding expression itself is used to
     * narrow its type, which allows the strictNullChecks feature of TypeScript to work with `NgLet`.
     */
    static ngTemplateGuard_ngLet: 'binding';

    /**
     * Asserts the correct type of the context for the template that `NgLet` will render.
     *
     * The presence of this method is a signal to the Ivy template type-check compiler that the
     * `NgLet` structural directive renders its template with a specific context type.
     */
    static ngTemplateContextGuard<T>(dir: NgLetDirective<T>, ctx: any): ctx is NgLetContext<Exclude<T, false | 0 | '' | null | undefined>> {
        return true;
    }
}

användning

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

@Component({
  selector: 'app-root',
  template: `
  <ng-container *ngLet="(num1 + num2) as total"> <!-- single computation -->
    <div>
      1: {{ total }} <!-- 3 -->
    </div>
    <div>
      2: {{ total }} <!-- 3 -->
    </div>
  </ng-container> 
  `,
})
export class AppComponent {
  num1: number = 1;
  num2: number = 2;
}

Relaterade artiklar