Início / coding / Perguntas / 79437000
Accepted
PaulBunion
Asked: 2025-02-14 00:15:23 +0800 CST

Sinal de entrada angular com tipo de função

  • 772

Tenho um antigo @Inputque passa uma função de retorno de chamada do componente pai, que eu gostaria de converter em um sinal de entrada.

Usando a entrada do antigo decorador, posso chamar a função passada simplesmente fazendo this.callback(). Isso, é claro, não funciona com um sinal de entrada porque a mesma declaração simplesmente retorna o valor da entrada... que neste caso é uma função, então eu pensaria que this.callback()()funcionaria para obter o valor da entrada (a função) e então realmente chamar a função, mas parece que não funciona.

Se eu passar uma função para um sinal de entrada (atualmente definido como callback = input.required<() => void>()), há uma maneira de realmente chamar a função ou preciso apenas continuar com a antiga entrada do decorador por enquanto?

angular

2 respostas

  1. Best Answer

    Certifique-se .bind(this)de que o retorno de chamada seja executado no escopo pai.

    O retorno de chamada também deve ser passado como está, sem executá-lo.

    import { Component, input } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';

@Component({
  selector: 'app-child',
  template: `
    <button (click)="clickEvent()">click</button>
  `,
})
export class Child {
  callback = input.required<() => void>();

  clickEvent() {
    this.callback()();
  }
}

@Component({
  selector: 'app-root',
  imports: [Child],
  template: `
    <app-child [callback]="callback.bind(this)">
  `,
})
export class App {
  name = 'Angular';

  callback() {
    console.log('from parent', this.name);
  }
}

bootstrapApplication(App);

    Demonstração do Stackblitz

    • 1

  2. Faça do seu retorno de chamada uma função de seta em vez de um método regular. Dessa forma, você manterá o thiscontexto.

    @Component({
  selector: 'app-root',
  imports: [Child],
  template: `
    <app-child [callback]="callback">
  `,
})
export class App {

  callback = () => {        
    console.log('from parent', this.name);
  }
}
    • 1

relate perguntas