如何避免离子选项/离子选择中的确定/取消按钮

Question

您好如何避免离子选项中的确定和取消按钮？

点击离子选项后,我需要输出如下图所示.

我按照http://ionicframework.com/docs/v2/api/components/select/Select/尝试了所有选项.

然而,我无法实现这个ui.

即使打字后interface="action-sheet"我也无法实现想要的外观.

我在哪里可以找到演示或获得此视图的任何帮助？

Answer 1

这个问题实际上是我自己需要的东西,我知道有些人需要它一段时间.所以我希望这会有所帮助..

选项1:包装的超级组件

首先,我们创建一个名为select-alertless的组件.这是包含以下选项的HTML:

<ion-select [(ngModel)]="model" #select>
    <ion-option *ngFor="let option options" [value]="option.id">{{option.name}}</ion-option>
</ion-select>

非常简单,有一个视图孩子的链接.

现在scss隐藏ok/cancel按钮:

.select-alertless{
    .alert-button-group{
        display:none;
        }
    }

实际的组件类,它在html中的select上查找set.查找选项并在点击上设置发射.因此,每当有人点击其中一个选项时.打开功能就是在您单击后关闭警报.

 @Component({
    templateUrl: 'select-alertless.html',
    selector: 'select-alertless',
})
export class select_alertless {
    // the options that are displayed
    @Input('options') public options: any[];
    @Input('model') public model: any;

    // the event that is to be emitted when changes occures
    @Output('change') public change: EventEmitter<any> = new EventEmitter<any>();

    // The sets here capture events and emit the data to change when its needed. It also switched the open function for our own open function so then the viewcontroller can be closed.
    @ViewChild('select') public set ex(select: any | undefined) {
        if (select === undefined) return;
        select.open = this.open;
        if (select._options === undefined) {
            Object.defineProperty(select, '_options', {
                set: (val) => {
                    select['__options'] = val;
                    val.forEach(option => option.ionSelect.subscribe(d => {
                        this.change.emit(d);
                        this.model = d;

                        select.overlay.dismiss();
                    }));
                },
                get: function () { return select['__options'] }
            })
        }
    }
    open() {
        if ((<any>this)._disabled) {
            return;
        }

        console.debug('select, open alert');

        // the user may have assigned some options specifically for the alert
        const selectOptions = deepCopy((<any>this).selectOptions);

        // make sure their buttons array is removed from the options
        // and we create a new array for the alert's two buttons
        selectOptions.buttons = [{
            text: (<any>this).cancelText,
            role: 'cancel',
            handler: () => {
                (<any>this).ionCancel.emit(null);
            }
        }];

        // if the selectOptions didn't provide a title then use the label's text
        if (!selectOptions.title && (<any>this)._item) {
            selectOptions.title = (<any>this)._item.getLabelText();
        }

        let options = (<any>this)._options.toArray();


        // default to use the alert interface
        (<any>this).interface = 'alert';

        // user cannot provide inputs from selectOptions
        // alert inputs must be created by ionic from ion-options
        selectOptions.inputs = (<any>this)._options.map(input => {
            return {
                type: ((<any>this)._multi ? 'checkbox' : 'radio'),
                label: input.text,
                value: input.value,
                checked: input.selected,
                disabled: input.disabled,
                handler: (selectedOption: any) => {
                    // Only emit the select event if it is being checked
                    // For multi selects this won't emit when unchecking
                    if (selectedOption.checked) {
                        input.ionSelect.emit(input.value);
                    }
                }
            };
        });

        var selectCssClass = 'select-alert';

        // create the alert instance from our built up selectOptions
        (<any>this).overlay = new Alert((<any>(<any>this))._app, selectOptions);

        if ((<any>this)._multi) {
            // use checkboxes
            selectCssClass += ' multiple-select-alert select-alertless';
        } else {
            // use radio buttons
            selectCssClass += ' single-select-alert select-alertless';
        }

        // If the user passed a cssClass for the select, add it
        selectCssClass += selectOptions.cssClass ? ' ' + selectOptions.cssClass : '';
        (<any>this).overlay.setCssClass(selectCssClass);

        (<any>this).overlay.addButton({
            text: (<any>this).okText,
            handler: (selectedValues: any) => {
                (<any>this).onChange(selectedValues);
                (<any>this).ionChange.emit(selectedValues);
            }
        });


        (<any>this).overlay.present(selectOptions);

        (<any>this)._isOpen = true;
        (<any>this).overlay.onDidDismiss(() => {
            (<any>this)._isOpen = false;
        });
    }
}

如果select中创建的警报是公共的而不是局部变量,那么这个答案会短得多.

将此添加到您的应用模块,您可以自由使用它.这是一个例子:

<ion-item>
            <ion-label>stuff</ion-label>
            <select-alertless [model]="data" item-content [options]="options" (change)="data = $event"></select-alertless>
</ion-item>

您可以添加更多传递给ion-select的输入以进行更多配置.

选项2:扩展选择自己

这将是一个更好的解决方案,因为它让您可以选择仅像ion-select only select-alertless一样编写组件

import { AfterContentInit, Component, ContentChildren, ElementRef, EventEmitter, forwardRef, Input, HostListener, OnDestroy, Optional, Output, Renderer, QueryList, ViewEncapsulation } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

import { ActionSheet, Alert, App, Config, Form, Ion, Item, NavController, Option, ViewController } from 'ionic-angular';
import { isBlank, isCheckedProperty, isTrueProperty, deepCopy } from 'ionic-angular/util/util';
import { Select as ImportSelect } from 'ionic-angular/components/select/select';


export class TempSelect extends ImportSelect {
    static decorators = undefined;
    // static propDecorators = undefined;
}

export const SELECT_VALUE_ACCESSOR: any = {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => Select),
    multi: true
};

@Component({
    selector: 'select-alertless',
    styles: ['.select-alertless .alert-button-group{display:none}'],
    template:
'<div *ngIf="!_text" class="select-placeholder select-text">{{placeholder}}</div>' +
'<div *ngIf="_text" class="select-text">{{selectedText || _text}}</div>' +
'<div class="select-icon">' +
'<div class="select-icon-inner"></div>' +
'</div>' +
'<button aria-haspopup="true" ' +
'[id]="id" ' +
'ion-button="item-cover" ' +
'[attr.aria-labelledby]="_labelId" ' +
'[attr.aria-disabled]="_disabled" ' +
'class="item-cover">' +
'</button>',
host: {
        '[class.select-disabled]': '_disabled'
    },
    providers: [SELECT_VALUE_ACCESSOR],
    encapsulation: ViewEncapsulation.None,
})
export class Select extends TempSelect implements AfterContentInit, ControlValueAccessor, OnDestroy {
    public overlay: Alert;
    private __options: any;
    constructor(
        _app: App,
        _form: Form,
        config: Config,
        elementRef: ElementRef,
        renderer: Renderer,
        @Optional() public _item: Item,
        @Optional() _nav: NavController
    ) {
        super(_app, _form, config, elementRef, renderer, _item, _nav);
        this.setElementClass(`${this._componentName}-${this._mode}`, false);
    }
public set _options(val) {
    this.__options = val;
    if (!this._multi) {
        this.__options.forEach(option => {
            option.ionSelect.subscribe(selectedValues => {
                this.onChange(selectedValues);
                this.ionChange.emit(selectedValues);
                this._isOpen = false;
                this.overlay.dismiss();
            });
        });
    }
}
public get _options() {
    return this.__options;
}
open() {
    if (this._disabled) {
        return;
    }

    // the user may have assigned some options specifically for the alert
    const selectOptions = deepCopy(this.selectOptions);

    // make sure their buttons array is removed from the options
    // and we create a new array for the alert's two buttons
    selectOptions.buttons = [{
        text: this.cancelText,
        role: 'cancel',
        handler: () => {
            this.ionCancel.emit(null);
        }
    }];

    // if the selectOptions didn't provide a title then use the label's text
    if (!selectOptions.title && this._item) {
        selectOptions.title = this._item.getLabelText();
    }

    let options = this._options.toArray();


    // default to use the alert interface
    this.interface = 'alert';

    // user cannot provide inputs from selectOptions
    // alert inputs must be created by ionic from ion-options
    selectOptions.inputs = this._options.map(input => {
        return {
            type: (this._multi ? 'checkbox' : 'radio'),
            label: input.text,
            value: input.value,
            checked: input.selected,
            disabled: input.disabled,
            handler: (selectedOption: any) => {
                // Only emit the select event if it is being checked
                // For multi selects this won't emit when unchecking
                if (selectedOption.checked) {
                    input.ionSelect.emit(input.value);
                }
            }
        };
    });

    var selectCssClass = 'select-alert';

    // create the alert instance from our built up selectOptions
    this.overlay = new Alert((<any>this)._app, selectOptions);

    if (this._multi) {
        // use checkboxes
        selectCssClass += ' multiple-select-alert';
    } else {
        // use radio buttons
        selectCssClass += ' single-select-alert select-alertless';
    }

    // If the user passed a cssClass for the select, add it
    selectCssClass += selectOptions.cssClass ? ' ' + selectOptions.cssClass : '';
    this.overlay.setCssClass(selectCssClass);

    this.overlay.addButton({
        text: this.okText,
        handler: (selectedValues: any) => {
            this.onChange(selectedValues);
            this.ionChange.emit(selectedValues);
        }
    });


    this.overlay.present(selectOptions);

    this._isOpen = true;
    this.overlay.onDidDismiss(() => {
        this._isOpen = false;
    });
}

}

使用如下:

<select-alertless item-content  [(ngModel)]="data"><ion-option></ion-option></select-alertless>

基本上像正常选择一样使用

有关如何使用它的更多信息和示例项目,请参阅此github:https: //github.com/misha130/ionic2-select-nobuttons