0

Queria saber se é possível passar uma função por meio do two way data bind do angular. Vou tentar explicar, tenho um componente com 3 botões e gostaria de usá-los em várias parte do meu projeto. Queria pode passar as funções para os botões executarem, tentarei dar um exemplo.

componente onde quero implementar meu botões:

<div>
  <component-btns [(botao1)]="funcao1" [(botao2)]="funcao2" [(botao3)]="funcao3"><component-btns>
</div>

Essas funções serão recebidas no meu component-btns e referenciadas aos botões no meu html.

Se eu executar as funções e pedir um console.log(this) o que será impresso é o this do meu component-btns e não o this que usei para implementar e passar as funções para meu component-btns.

É bem confuso o que quero fazer, queria saber se é possível fazer algo assim?

1 Resposta 1

2

Você pode fazer algo assim: dentro do seu component-btns você vai definir alguns Outputs

@Component({
   selector: 'component-btns',
   templateUrl: 'component-btns.component.html'
})
export class ComponentBtns {
    @Output('botao1')
    botao1Event: EventEmitter<any> = new EventEmitter();

    @Output('botao2)
    botao2Event: EventEmitter<any> = new EventEmitter();

    @Output('botao3')
    botao3Event: EventEmitter<any> = new EventEmitter();

    botao1Click() {
        this.botao1Event.emit();
    }

    botao2Click() {
        this.botao2Event.emit();
    }

    botao3Click() {
        this.botao3Event.emit();
    }
}

Você pode ler sobre os EventEmitter aqui

Tendo isso montado, no template que você quiser utilizar o component-btns você pode utilizar event binding nos Output que você definiu. Exemplo:

<component-btns (botao1)="funcaoBotao1()" (botao2)="funcaoBotao2()" (botao3)="funcaoBotao3()"><component-btns>

Dessa maneira, quando o botão for clicado, ele executará a função de dentro do ComponentBtns que emitirá um evento, no qual o seu componente pai estará ouvindo e respondendo.

2
  • Funcionou perfeitamente, eu estava tentando fazer de uma maneira completamente diferente, você salvou meu dia rsrs, muito obrigado Commented 19/01/2018 às 17:18
  • Disponha, a documentação do Angular ajuda bastante, quando puder dê uma lida, tem bastante coisa interessante. Commented 19/01/2018 às 17:21

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .