如何绑定自定义离子角度组件的值和事件处理程序答案

【问题标题】：How to bind the value and event handler of a custom ionic angular component如何绑定自定义离子角度组件的值和事件处理程序
【发布时间】：2021-11-16 13:03:52
【问题描述】：

我在 ionic/angular 中使用 ion-datetime，因此用户可以在我的应用中设置日期。但是我在巴西，所以我必须设置属性来更改组件中使用的文本：

<ion-datetime displayFormat="DD/MMM/YYYY" pickerFormat="DD MMM YYYY"
                monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Ago, Set, Out, Nov, Dez"
                doneText="Selecionar"
                cancelText="Cancelar" 
                [(ngModel)]="myProperty" name="data"
                (ionChange)="myChangeHandler();">
</ion-datetime>

这工作正常，但我想创建一个自定义组件来将此配置集中在一个地方。所以我想用上面的代码代替：

<my-datetime [(ngModel)]="myProperty" name="data"
             (ionChange)="myChangeHandler();">  </my-datetime/>

我知道如何创建自定义组件来声明 ion-datetime，但我的疑问是如何将绑定到自定义组件、模型属性和更改事件“重定向”到内部 ion-datetime。

【问题讨论】：

嗨，您尝试过使用 @Input() 和 @Output() 装饰器吗？

标签： angular ionic-framework

【解决方案1】：

您可以为此使用@angular/core 中的@Input() 和@Output()

<my-datetime [property]="myProperty" name="data"
         (dateSelected)="myChangeHandler();">  </my-datetime/>

然后在我的日期时间组件中

@Input() property: any = '';
@Output() readonly dateSelected= new EventEmitter<any>();

并在选择日期时发出类似的事件

 this.dateSelected.emit(your selected date);

emit 会调用父组件中的 myChangeHandler

Here 是这些装饰器的详细指南，您可以关注此获取更多信息。

【讨论】：