Question

我正在开发一个Angular组件custom-select，它在内部使用本机html选择。 custom-select的模板实现如下所示：

<!-- custom-select.component.html -->

<select class="select" [(ngModel)]="selectedId" (change)="onChange()">
  <option *ngFor="let question of questions" [value]="question.id">{{ question.text }}</option>
</select>

因此内部选择有一个change处理程序。

对于我的自定义选择组件，我希望有一个名为change的输出绑定。因此，自定义选择组件的相应TS文件如下所示：

@Component({
  selector: 'custom-select',
  templateUrl: './custom-select.component.html'
})
export class CustomSelectComponent implements OnInit {
  @Input() options: Array<{ id: string, text: string }>;
  @Output() change = new EventEmitter<string>();

  selectedId = '';

  constructor() { }

  onChange() {
    this.change.emit(this.selectedId);
  }
}

现在我可以使用我的自定义选择：

<custom-select [options]="options" (change)="onChange($event)"></custom-select>`

如果我这样做，则会调用select change handler两次。似乎第一个电话是我期待的电话。第二个调用似乎是由内部选择更改处理程序触发的。

如果我将自定义选择的处理程序重命名为selectChange，一切正常。

<custom-select [options]="options" (selectChange)="onChange($event)"></custom-select>

但是，由于我希望有一个干净的API，我更喜欢命名输出change而不是selectChange。

有没有办法做到这一点？

Answer 1

您可以这样使用：

@Output('selectChange') change = new EventEmitter<string>();

指的是selectChange。您可以了解有关此here

的更多信息

Answer 2

在他们的官方文档中有更多相关内容：https://angular.io/guide/styleguide#dont-prefix-output-properties

在Angular 2+中使用自定义组件的更改输出

2 个答案: