Estava criando um componente angular e pensei "Será que é possível pegar um método ou retorno de função sem precisar emitir um evento em si?".
Foi onde achei uma propriedade do angular que é o exportAs
.
O exportAs basicamente exporta seu componente com todas as variáveis e métodos públicos.
Começando com o básico vamos criar um projeto Angular simples rodando o comando
ng new nameProject
Para este caso vou escolher as opções básicas do CLI.
para rodar o projeto execute o comando
ng serve
E ele irá rodar na porta https://localhost:4200
Feito isso, vamos criar nosso componente onde vamos exportar ele para o "pai".
Para criar um novo componente você pode criar na "mão" ou rodar o comando ng g c nameComponent
ou ng generate component nameComponent
ambos criam um novo component.
Quando inicia um novo componente vamos criar um método qualquer aqui que retorno uma informação. Vamos fazer o exemplo do Output primeiro para demonstrar a diferença de ambos.
O app.component.html
ficaria dessa forma
<div class="content">
<div style="display: flex">
<app-user #exportUser="user"></app-user>
<button (click)="exportUser.hideUser()">Hide User</button>
</div>
<div *ngIf="exportUser.user">
<p>User:</p>
<p>{{ exportUser.user.name }}</p>
<p>{{ exportUser.user.age }}</p>
</div>
</div>
No exemplo acima, estou importando o component app-user
no html e criando uma variável nele chamada exportUser
, o nome desta variável você quem escolhe e não precisa ter o nome “export” nela, usei apenas como exemplo.
Feito isso eu posso pegar os valores de variáveis e métodos publicos dentro do meu componente e poder fazer todas as interações com ele.
O user.component.ts
fica dessa forma
import { Component } from '@angular/core';
interface User {
name: string;
age: number;
}
@Component({
selector: 'app-user',
templateUrl: './user.component.html',
styleUrls: ['./user.component.scss'],
exportAs: 'user',
})
export class UserComponent {
user: User | undefined;
clickedButton = '';
showTextClickedButton = false;
showUser() {
this.user = {
name: 'Joao',
age: 18,
};
}
hideUser() {
this.user = undefined;
}
}
O “Pulo do Gato” está em colocar o exportAs no decorator, exportAs: 'user'
, o nome da variável que utilizei para atribuir ao exportAs é a qual voce vai usar dentro do app.component.html
então o nome delas precisam ser iguais. Você também pode escolher o nome da variável que achar mais viável para o seu component.
Essa é uma forma que podemos trabalhar com eventos, além do Output
e pegar o retorno de alguma variável específica, podendo facilitar assim para algo que precise.
Top comments (2)
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 deexportUser
éUserComponent
e vc já consegue acessar propriedades e métodos públicos por padrão.Ou seja:
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:
E este template:
O código acima vai dar erro, pois o Angular entende que
exportUser
é do tipoUserComponent
.Para corrigir, basta fazermos isso:
O mesmo vale para elementos comuns:
O tipo de
myDiv
éHTMLDivElement
e por isso vai dar erro. Para corrigir:Ótimo ponto, obrigado!!! =D =D