这个问题实际上是我自己需要的,我知道有些人已经需要它有一段时间了。所以我希望这有帮助..
选项 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 隐藏确定/取消按钮:
.select-alertless{
.alert-button-group{
display:none;
}
}
实际的组件类在 html 内的 select 上查找集合。查找选项并设置点击时的发出。因此,每次有人单击其中一个选项时。
打开功能只是在单击后消除警报。
@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:扩展 SELECT 自身
这将是一个更好的解决方案,因为它使您可以选择仅编写组件,例如 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 https://github.com/misha130/ionic2-select-nobuttons