如何避免 ion-option/ion-select 中的 ok/cancel 按钮

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>

视图子项 link 非常简单。

现在隐藏 ok/cancel 按钮的 scss:

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

在 html 内的 select 上查找集合的实际组件 class。查找选项并在点击时设置发射。因此，每当有人单击其中一个选项时。打开功能就是点击后关闭提示

 @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 中创建的警报是 public 而不是局部变量，那么这个答案会短很多。

将此添加到您的应用程序模块中，您就可以自由使用它了。这是一个例子：

<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：扩展 SELECT 本身

这将是一个更好的解决方案，因为它让您可以选择仅像 ion-select 那样编写组件 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>

基本正常使用select

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

如何避免 ion-option/ion-select 中的 ok/cancel 按钮

How to avoid ok/cancel button in ion-option/ion-select

angular

ionic2

ng-options