Início / coding / Perguntas / 79566073
Accepted
WSD
Asked: 2025-04-10 16:11:52 +0800 CST

Comportamento de entrada/saída do componente angular ao usar model()

  • 772

Eu queria perguntar isso no Github do projeto Angular, mas aparentemente perguntas/esclarecimentos pertencem ao StackOverflow, então aqui estamos :)

Os autores de bibliotecas podem implementar a vinculação bidirecional usando a função new model(). Ao usar essa função, o Angular cria automaticamente uma saída correspondente para esse modelo, possibilitando o uso do padrão [property]and (propertyChange). No entanto, o componente emite imediatamente o valor padrão/inicial por meio do evento output assim que é inicializado.

Por exemplo, com este componente de terceiros:

@Component(...)
export class ThirdPartyChildComponent {
  value = model.required<string>();
}

E usando assim:

@Component({
  template: `<third-party-child [value]="defaultValue()" (valueChange)="logValueChange($event)">`
})
export class ParentComponent {
  public defaultValue = input('initial value');
  public logValueChange(value: string) {
    console.log(value);
  }
}

O logValueChangemétodo é chamado imediatamente com 'valor inicial' durante a inicialização.

Comportamento esperado

Como consumidor, eu esperaria que o evento de saída ( valueChange) fosse emitido somente quando o valor realmente mudasse após a inicialização, não imediatamente após receber o valor de entrada inicial.

Neste stackblitz, essa emissão inicial não ocorre no ngModel, Angular Forms ou mesmo nas entradas HTML.

Tecnicamente falando, eu entendo por que model()isso pode acontecer ao usar o, mas estou tentando determinar se:

  • Este é um problema de design com o componente de terceiros
  • Talvez relacionado a um problema específico da versão?
  • Os autores da biblioteca devem fornecer mecanismos separados para valores iniciais e eventos de alteração?
  • Cabe a mim, como consumidor, diferenciar entre a primeira emissão e as emissões futuras
angular

1 respostas

  1. Best Answer

    Como visto no stackblitz abaixo, não há gatilho de evento de alteração no carregamento inicial.

    As possíveis razões podem ser:

    1. O modelo pode ser modificado no carregamento inicial, o que aciona o evento de alteração (código de terceiros).
    2. Pode ser um bug específico da versão em que o evento de alteração é disparado.
    
import { Component, model } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-child',
  imports: [FormsModule],
  template: `
    <input type="text" [(ngModel)]="name">
  `,
})
export class Child {
  name = model();
}

@Component({
  selector: 'app-root',
  imports: [Child],
  template: `
    <app-child [name]="name" (nameChange)="nameChange($event)"/>
  `,
})
export class App {
  name = 'Angular';

  nameChange(event: any) {
    console.log('name change', event);
  }
}

bootstrapApplication(App);

    Demonstração do Stackblitz

    • 1

relate perguntas