Tengo una directiva estructural personalizada en un elemento de entrada. La función de controlador de eventos onBlur del elemento de entrada acepta dos variables de referencia del elemento de plantilla: una es una referencia a su propio NgModel y la otra una referencia a otro NgModel en la plantilla (fuera del elemento con la directiva adjunta).

Después de que se carga la página, la segunda variable de referencia no está definida en la llamada a onBlur, pero si hago clic dentro del segundo elemento de entrada y vuelvo al primer elemento de entrada, la referencia se establece en NgModel, como se esperaba en el evento Blur.

He buscado por todas partes, incluido Stack Overflow, sin suerte por qué ocurre este comportamiento. Descubrí que al usar las variables de referencia de plantilla *ngIf solo funcionarán dentro de la plantilla anidada creada por la directiva estructural, pero este comportamiento es diferente.

Puedo cambiar a usar @ViewChild para las variables de referencia del elemento de plantilla, lo que funciona, pero estoy modificando el código existente que debe permanecer lo más cerca posible del original. Todo funciona como se esperaba sin la directiva estructural personalizada.

Esto ocurre incluso con una directiva simple como se muestra a continuación.

Fragmento de directiva

 @Directive({ selector: '[appMyDirective]' }) export class MyDirective implements OnInit { constructor(private templateRef: TemplateRef<any>, private viewContainer: ViewContainerRef) { ngOnInit() { this.viewContainer.createEmbeddedView(this.templateRef); } }

fragmento de plantilla (HTML)

 <mat-form-field> <input matInput [(ngModel)]="comments" name="comments" #commentsRef="ngModel" (blur)="handleCommentsBlur(commentsRef, titleRef)" *appMyDirective> </mat-form-field> <mat-form-field> <input matInput [(ngModel)]="title" name="title" #titleRef="ngModel"> </mat-form-field>

fragmento de componente TS

 handleCommentsBlur(commentsRef: NgModel, titleRef: NgModel) { // titleRef is undefined after blur event occurs // However when user clicks in the title element and goes back to the comments then the titleRef holds a reference to the NgModel on the next comments onBlur event }