DEV Community

Discussion on: Criando eventBinding com exportAs

View post
Collapse
 
wldomiciano profile image
Wellington Domiciano •

Oi, João \o

Com base no seu texto eu fui pesquisar mais um pouco e percebi algumas coisas.

No seu exemplo o exportAs é desnecessário, pois mesmo sem ele o Angular já entende que o tipo de exportUser é UserComponent e vc já consegue acessar propriedades e métodos públicos por padrão.

Ou seja:

<!-- Isto: -->
<app-user #exportUser="user"></app-user>

<!-- é equivalente a isto: -->
<app-user #exportUser></app-user>
Enter fullscreen mode Exit fullscreen mode

O exportAs brilha em cenários em que vc precisa que o tipo da template variable seja diferente do tipo do componente em que ela está sendo usada.

Por exemplo, imagina que vc tem esta diretiva:

import { Directive, HostBinding } from "@angular/core";

@Directive({
  selector: "[appHighlight]",
  exportAs: "appHighlight",
})
export class HighlightDirective {
  @HostBinding("style.color") private color = "";

  toggleHighlight(): void {
    this.color = this.color === "" ? "yellow" : "";
  }
}
Enter fullscreen mode Exit fullscreen mode

E este template:

<app-user appHighlight #exportUser></app-user>
<button (click)="exportUser.toggleHighlight()">Highlight</button>
Enter fullscreen mode Exit fullscreen mode

O código acima vai dar erro, pois o Angular entende que exportUser é do tipo UserComponent.

Para corrigir, basta fazermos isso:

<app-user appHighlight #exportUser="appHighlight"></app-user>
<button (click)="exportUser.toggleHighlight()">Highlight</button>
Enter fullscreen mode Exit fullscreen mode

O mesmo vale para elementos comuns:

<div appHighlight #myDiv>Hello</div>
<button (click)="myDiv.toggleHighlight()">Highlight</button>
Enter fullscreen mode Exit fullscreen mode

O tipo de myDiv é HTMLDivElement e por isso vai dar erro. Para corrigir:

<div appHighlight #myDiv="appHighlight">Hello</div>
<button (click)="myDiv.toggleHighlight()">Highlight</button>
Enter fullscreen mode Exit fullscreen mode
Collapse
 
joaopaulo_avila profile image
João Paulo Ávila •

Ótimo ponto, obrigado!!! =D =D