Como dije, quiero usar la sintaxis basada en cadenas de directivas estructurales existente en la directiva personalizada
<element *ngFor='let x of array;let last = last;'></element>No encuentro ningún documento detallado, cómo podemos decodificar la sintaxis anterior en nuestra directiva estructural personalizada. Sé que podemos usar esta sintaxis con todas las directivas estructurales *xyz pero siempre uso [xyz] en su lugar. Intento encontrar documentos oficiales angulares pero no obtuve nada.
Así que me muevo a su código para entender *NgFor en github , y lo entendí todo excepto cómo están decodificando la sintaxis.
Si ves el selector es como abajo
@Directive({selector: '[ngFor][ngForOf]'}) @Input() set ngForTrackBy(fn: TrackByFunction<T>) { //definition } Y todos los métodos de entrada comienzan con un prefijo de selector como ngForTrackBy . es solo asi? ¿Tenemos que seguir el prefijo del selector?
En caso afirmativo, ¿cuáles son todas las demás cosas que podemos hacer con este enfoque basado en prefijos? Si no, ¿cuál es el enfoque correcto?
Es trabajo del compilador hacer coincidir las variables definidas con la sintaxis let y el contexto pasado a la vista incrustada. Puede definir tantas variables como desee, pero si no pasa los valores para ellas a través del contexto, sus valores no estarán definidos.
Aquí estoy usando una directiva my personalizada y definiendo dos variables a y b con la sintaxis let :
<ng-template my let-a=a let-b=b let-c=c> <span>inside my, a is {{a}}, b is {{b}}, c is undefined: {{c === undefined}}</span> </ng-template>Luego, cuando describo la directiva, paso el contexto con valores variables a la vista incrustada:
import { Directive, TemplateRef, ViewContainerRef } from '@angular/core'; @Directive({ selector: '[my]' }) export class MyDirective { constructor(public vc: ViewContainerRef, public t: TemplateRef<any>) { } ngOnInit() { const t = this.vc.createEmbeddedView(this.t, {a: 3, b: 4}); } } Lo mismo es cierto para la directiva ngForOf , así es como la busca el contexto :
export class NgForOfContext<T, U extends NgIterable<T> = NgIterable<T>> { constructor(public $implicit: T, public ngForOf: U, public index: number, public count: number) {} get first(): boolean { return this.index === 0; } get last(): boolean { return this.index === this.count - 1; } get even(): boolean { return this.index % 2 === 0; } get odd(): boolean { return !this.even; } }También puede usar una sintaxis abreviada con una directiva personalizada:
<span *my="let a=a; let b=b; let c=c;">inside my, a is {{a}}, b is {{b}}, c is undefined: {{c === undefined}}</span>