Angular 正式 5.10.3 自定义切换事件更改

问题描述

我有一个正式的自定义模板，带有两个文本之间的离子切换。如何捕捉更改事件？这是一个简化的代码示例：

自定义形式的想法：

import { Component } from '@angular/core';
import { FieldType } from '@ngx-formly/core';

@Component({
 selector: 'formly-field-input',template: `
   <span class="toggleContainer">
      <p [class]="to.checked ? '' : 'toggleSelected'"> {{ to.textBefore }} </p>
      <ion-toggle 
        [checked]="to.checked" 
        [disabled]="to.disabled" 
        color="primary">
      </ion-toggle>
      <p [class]="to.checked ? 'toggleSelected' : ''"> {{ to.textAfter }} </p>
   </span>
 `,styleUrls: ['./toggle-2-labels.component.scss'],})
export class toggle2LabelsComponent extends FieldType { }

添加到表单的输入：

 {
    key: 'exampleName',type: 'toggle2Labels',wrappers: ['acc-wrapper'],templateOptions: {
        disabled: true,checked: false,textBefore: 'something',textAfter: 'something',onChange: (field,value) => console.log('onChange'),change: (field,$event) => {
            console.log('change');
        },},hooks: {
        onInit: (field: FormlyFieldConfig) => {
            //Other stuff
        },}
 },

我尝试使用 onChange 和更改事件但没有工作。我认为这可能是一个本身没有值的问题，但我不知道如何将它添加到我的自定义切换中。也许任何类型的方法来获取像 to.checked 更改这样的属性都可以。有什么想法吗？

解决方法

您需要的属性称为 ionChange。由于这是一个离子框架元素，仅使用约定默认值并不能保证工作。

template: `
   <span class="toggleContainer">
      <p [class]="to.checked ? '' : 'toggleSelected'"> {{ to.textBefore }} </p>
      <ion-toggle 
        (ionChange)="() => console.log('onChange')"
        [checked]="to.checked" 
        [disabled]="to.disabled" 
        color="primary">
      </ion-toggle>
      <p [class]="to.checked ? 'toggleSelected' : ''"> {{ to.textAfter }} </p>
   </span>
 `,

,

Html 文件

<span class="toggleContainer">
      <p [class]="to.checked ? '' : 'toggleSelected'">{{ to.textBefore }}</p>
      <ion-toggle
        (ionChange)="changeToggle($event)"
        [checked]="to.checked"
        [disabled]="to.disabled"
        color="primary"
      >
      </ion-toggle>
      <p [class]="to.checked ? 'toggleSelected' : ''">{{ to.textAfter }}</p>
    </span>

ts 文件

public to = {
    checked: false,disabled: false,textBefore: 'something',textAfter: 'something'
  };
  changeToggle(event: any) {
    console.log(event.value);
    this.to.checked = event.value;
  }

,

最后我明白了，原来的 onChange 和 change 事件不适用于自定义输入（它们也不适用于正式的指南示例），所以我的解决方案是获得 {自定义输入模板上的 {1}} 事件，在 init 上有一个钩子，就像示例一样；

正式定制：

(ionChange)

自定义输入

import { Component } from '@angular/core';
import { FieldType } from '@ngx-formly/core';

@Component({
 selector: 'formly-field-input',template: `
   <span class="toggleContainer">
      <p [class]="to.checked ? '' : 'toggleSelected'"> {{ to.textBefore }} </p>
      <ion-toggle 
        <ion-toggle 
          [formControl]="formControl" 
          [formlyAttributes]="field"
          [value]="to.checked"
          [checked]="to.checked" 
          [disabled]="to.disabled" 
          (ionChange)="formControl.setValue(to.checked)"
        color="primary">
        color="primary">
      </ion-toggle>
      <p [class]="to.checked ? 'toggleSelected' : ''"> {{ to.textAfter }} </p>
   </span>
 `,styleUrls: ['./toggle-2-labels.component.scss'],})
export class toggle2LabelsComponent extends FieldType { }