Início / coding / Perguntas / 78798296
Accepted
Green Grasso Holm
Asked: 2024-07-26 21:22:32 +0800 CST

Manipulador de alteração ngModel implícito angular quando ngModelChange não é especificado?

  • 772

Tenho experiência no uso de [(ngModel)]para obter vinculação de valor bidirecional entre um campo de componente e um controle de formulário no modelo do componente e no uso de (ngModelChange)para realizar trabalho adicional quando o valor for alterado.

// code
foo: number;
onFooUpdate($event) { /* work */ }
// template
<input [(ngModel)]="foo" (ngModelChange)="onFooUpdate($event)" />

Eu juro que li uma vez que existe um nome que pode ser usado para o manipulador, com base no nome do campo, que o aplicativo chamará por convenção quando o valor for alterado se ngModelChangednão for especificado explicitamente. Algo como:

// code
foo: number;
fooChange($event) { /* work */ }
// template
<input [(ngModel)]="foo" />

onde, quando o valor for fooalterado, a aplicação irá procurar um método chamado fooChangee, se existir, irá chamá-lo. Estou tentando isso agora, alternativamente com fooChangee fooChanged, mas eles não estão sendo chamados e agora não consigo encontrar nenhuma informação para apoiar isso. Estou enganado?

angular

2 respostas

  1. Best Answer

    Suponha que você crie uma propriedade com vinculação de dados bidirecional.

    <app-child [(test)]="qwerty"/>

    Então, para que isso funcione, deve existir um @Input e um @Output no filho, onde o critério é que ele tenha o name . testChangeAo fornecer isso no filho, você pode obter uma ligação de dados bidirecional.

    @Input() test: string;
@Output() testChange: EventEmitter<string> = new EventEmitter<string>();

    Acho que você entendeu mal, ao pensar que o ngModel cria automaticamente um emissor de saída com <<prop name>>Change, o que está errado.

    Se você olhar o código fonte , temos apenas @Output() ngModelChange, que é chamado quando o valor é alterado.

    Então você tem que especificá-lo manualmente para ser chamado ngModelChange.

    • 1

  2. Você está se referindo à sintaxe de ligação bidirecional . Funciona apenas para entradas e saídas de um componente que oferece ligação bidirecional. Supondo que você tenha um componente que possui uma ligação bidirecional com uma propriedade chamada value, veja como serão as entradas e saídas:

    @Component({ selector: 'my-component' })
export class MyComponent {
  @Input() value: string;
  @Output() valueChange = new EventEmitter<string>();
}

    Aqui é importante que o nome da saída corresponda ao nome da entrada, com o sufixo Change. Então você pode usar a ligação bidirecional como a seguir:

    <my-component [(value)]="someVar" />

    No entanto, isso só funciona para entradas e saídas. Não funciona para o seu cenário. Você precisa usar o código acima, mais detalhado.

    • 0

relate perguntas