mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 20:33:32 +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:
@ -1,13 +1,14 @@
|
||||
import {Component, Optional, ElementRef, Renderer, Input, Output, Provider, forwardRef, EventEmitter, HostListener, ViewEncapsulation} from '@angular/core';
|
||||
import {NG_VALUE_ACCESSOR} from '@angular/common';
|
||||
import { Component, EventEmitter, forwardRef, HostListener, Input, Optional, Output, Provider, ViewEncapsulation } from '@angular/core';
|
||||
import { NG_VALUE_ACCESSOR } from '@angular/common';
|
||||
|
||||
import {Config} from '../../config/config';
|
||||
import {Picker, PickerColumn, PickerColumnOption} from '../picker/picker';
|
||||
import {Form} from '../../util/form';
|
||||
import {Item} from '../item/item';
|
||||
import {merge, isBlank, isPresent, isTrueProperty, isArray, isString} from '../../util/util';
|
||||
import {dateValueRange, renderDateTime, renderTextFormat, convertFormatToKey, getValueFromFormat, parseTemplate, parseDate, updateDate, DateTimeData, convertDataToISO, daysInMonth, dateSortValue, dateDataSortValue, LocaleData} from '../../util/datetime-util';
|
||||
import {NavController} from '../nav/nav-controller';
|
||||
import { Config } from '../../config/config';
|
||||
import { Picker, PickerController } from '../picker/picker';
|
||||
import { PickerColumn, PickerColumnOption } from '../picker/picker-options';
|
||||
import { Form } from '../../util/form';
|
||||
import { Item } from '../item/item';
|
||||
import { merge, isBlank, isPresent, isTrueProperty, isArray, isString } from '../../util/util';
|
||||
import { dateValueRange, renderDateTime, renderTextFormat, convertFormatToKey, getValueFromFormat, parseTemplate, parseDate, updateDate, DateTimeData, convertDataToISO, daysInMonth, dateSortValue, dateDataSortValue, LocaleData } from '../../util/datetime-util';
|
||||
import { NavController } from '../nav/nav-controller';
|
||||
|
||||
const DATETIME_VALUE_ACCESSOR = new Provider(
|
||||
NG_VALUE_ACCESSOR, {useExisting: forwardRef(() => DateTime), multi: true});
|
||||
@ -193,7 +194,7 @@ const DATETIME_VALUE_ACCESSOR = new Provider(
|
||||
* ### App Config Level
|
||||
*
|
||||
* ```ts
|
||||
* import {ionicBootstrap} from 'ionic-angular';
|
||||
* import { ionicBootstrap } from 'ionic-angular';
|
||||
*
|
||||
* ionicBootstrap(MyApp, customProviders, {
|
||||
* monthNames: ['janeiro', 'fevereiro', 'mar\u00e7o', ... ],
|
||||
@ -418,7 +419,7 @@ export class DateTime {
|
||||
private _form: Form,
|
||||
private _config: Config,
|
||||
@Optional() private _item: Item,
|
||||
@Optional() private _nav: NavController
|
||||
@Optional() private _pickerCtrl: PickerController
|
||||
) {
|
||||
this._form.register(this);
|
||||
if (_item) {
|
||||
@ -426,10 +427,6 @@ export class DateTime {
|
||||
this._labelId = 'lbl-' + _item.id;
|
||||
this._item.setCssClass('item-datetime', true);
|
||||
}
|
||||
|
||||
if (!_nav) {
|
||||
console.error('parent <ion-nav> required for <ion-datetime>');
|
||||
}
|
||||
}
|
||||
|
||||
@HostListener('click', ['$event'])
|
||||
@ -463,7 +460,7 @@ export class DateTime {
|
||||
// the user may have assigned some options specifically for the alert
|
||||
let pickerOptions = merge({}, this.pickerOptions);
|
||||
|
||||
let picker = Picker.create(pickerOptions);
|
||||
let picker = this._pickerCtrl.create(pickerOptions);
|
||||
pickerOptions.buttons = [
|
||||
{
|
||||
text: this.cancelText,
|
||||
@ -489,7 +486,7 @@ export class DateTime {
|
||||
this.validate(picker);
|
||||
});
|
||||
|
||||
this._nav.present(picker, pickerOptions);
|
||||
picker.present(pickerOptions);
|
||||
|
||||
this._isOpen = true;
|
||||
picker.onDismiss(() => {
|
||||
|
Reference in New Issue
Block a user