mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 12:29:55 +08:00
refactor(overlays): inject overlay providers
BREAKING CHANGES: - Overlay components, such as Alert or Modals, should now be created using its injected provider. - Overlays now have the `present()` method on the overlay’s instance, rather than using `nav.present(overlayInstance)`. - All overlays now present on top of all app content, to include menus. - Below is an example of the change to `Alert`, but the pattern is the same for all overlays: ActionSheet, Loading, Modal, Picker, Popover, Toast WAS: ``` import { NavController, Alert } from ‘ionic-angular’; constructor(private nav: NavController) { } doAlert() { let alert = Alert.create({ title: 'Alert', }); this.nav.present(alert); } ``` NOW: ``` import { AlertController } from ‘ionic-angular’; constructor(private alertCtrl: AlertController) { } doAlert() { let alert = this.alertCtrl.create({ title: 'Alert' }); alert.present(); } ```
This commit is contained in:
@ -3,6 +3,7 @@ import { NG_VALUE_ACCESSOR } from '@angular/common';
|
||||
|
||||
import { ActionSheet } from '../action-sheet/action-sheet';
|
||||
import { Alert } from '../alert/alert';
|
||||
import { App } from '../app/app';
|
||||
import { Form } from '../../util/form';
|
||||
import { isBlank, isCheckedProperty, isTrueProperty, merge } from '../../util/util';
|
||||
import { Item } from '../item/item';
|
||||
@ -192,6 +193,7 @@ export class Select {
|
||||
@Output() ionCancel: EventEmitter<any> = new EventEmitter();
|
||||
|
||||
constructor(
|
||||
private _app: App,
|
||||
private _form: Form,
|
||||
private _elementRef: ElementRef,
|
||||
private _renderer: Renderer,
|
||||
@ -205,10 +207,6 @@ export class Select {
|
||||
this._labelId = 'lbl-' + _item.id;
|
||||
this._item.setCssClass('item-select', true);
|
||||
}
|
||||
|
||||
if (!_nav) {
|
||||
console.error('parent <ion-nav> required for <ion-select>');
|
||||
}
|
||||
}
|
||||
|
||||
@HostListener('click', ['$event'])
|
||||
@ -279,7 +277,7 @@ export class Select {
|
||||
}));
|
||||
alertOptions.cssClass = 'select-action-sheet';
|
||||
|
||||
overlay = ActionSheet.create(alertOptions);
|
||||
overlay = new ActionSheet(this._app, alertOptions);
|
||||
|
||||
} else {
|
||||
// default to use the alert interface
|
||||
@ -297,7 +295,7 @@ export class Select {
|
||||
});
|
||||
|
||||
// create the alert instance from our built up alertOptions
|
||||
overlay = Alert.create(alertOptions);
|
||||
overlay = new Alert(this._app, alertOptions);
|
||||
|
||||
if (this._multi) {
|
||||
// use checkboxes
|
||||
@ -318,7 +316,7 @@ export class Select {
|
||||
|
||||
}
|
||||
|
||||
this._nav.present(overlay, alertOptions);
|
||||
overlay.present(alertOptions);
|
||||
|
||||
this._isOpen = true;
|
||||
overlay.onDismiss(() => {
|
||||
|
Reference in New Issue
Block a user