Início / user-19921242

David Küng's questions

Martin Hope
David Küng
Asked: 2025-03-04 20:06:37 +0800 CST
  • 7

Tenho um componente dropdown Angular ( CustomDropdownComponent) que recebe uma lista de opções e um valor selecionado de seu componente pai via @Input(). O pai também escuta as alterações de seleção usando @Output().

No entanto, intencionalmente não atualizei o selectedValueno pai ao manipular o selectionChangeevento ( ) para ver se o menu suspenso reverteria para a seleção padrão. Surpreendentemente, o menu suspenso ainda atualiza para a opção recém-selecionada, mesmo que o estado pai permaneça inalterado.

Minhas perguntas:

  • Por que o menu suspenso atualiza a opção selecionada mesmo que o pai não armazene o novo valor?
  • Esse comportamento se deve à detecção de alterações do Angular ou ao funcionamento das vinculações de propriedades?
  • Como posso garantir que o menu suspenso exiba apenas o que o pai fornece e não retenha uma seleção, a menos que seja explicitamente armazenada no pai?

Aqui está uma versão simplificada da minha implementação:

Componente pai ( app.component.ts)

export class AppComponent {
  options = [
    { value: '1', text: 'Option 1' },
    { value: '2', text: 'Option 2' },
    { value: '3', text: 'Option 3' }
  ];

  selectedValue = ''; // Intentionally not updating this when selection changes

  handleOnChange(event: any) {
    console.log(event.target.value); // Logging the value but not saving it
  }
}

Modelo de componente pai ( app.component.html)

<app-custom-dropdown 
  [options]="options" 
  [selected]="selectedValue" 
  (selectionChange)="handleOnChange($event)">
</app-custom-dropdown>

Componente filho ( custom-dropdown.component.ts )

@Component({
  selector: 'app-custom-dropdown',
  templateUrl: './custom-dropdown.component.html',
  styleUrls: ['./custom-dropdown.component.scss']
})
export class CustomDropdownComponent {
  @Input() options: { value: string; text: string }[] = [];
  @Input() selected: string = '';

  @Output() selectionChange: EventEmitter<any> = new EventEmitter<any>();

  onChange(event: any) {
    this.selectionChange.emit(event); // Emitting value but parent does not save it
  }
}

Modelo de componente filho ( custom-dropdown.component.html)

<select (change)="onChange($event)" [value]="selected">
  <option value="" hidden>default</option>
  <option *ngFor="let option of options" [value]="option.value">
    {{ option.text }}
  </option>
</select>
angular