mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-22 13:32:54 +08:00
fix(base-input): initialize on ngAfterContentInit
This commit is contained in:
@ -1,4 +1,4 @@
|
|||||||
import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, HostListener, Input, OnDestroy, Optional, Renderer, ViewEncapsulation } from '@angular/core';
|
import { ChangeDetectorRef, Component, ElementRef, HostListener, Input, OnDestroy, Optional, Renderer, ViewEncapsulation } from '@angular/core';
|
||||||
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
||||||
|
|
||||||
import { Config } from '../../config/config';
|
import { Config } from '../../config/config';
|
||||||
@ -66,7 +66,7 @@ import { Item } from '../item/item';
|
|||||||
providers: [ { provide: NG_VALUE_ACCESSOR, useExisting: Checkbox, multi: true } ],
|
providers: [ { provide: NG_VALUE_ACCESSOR, useExisting: Checkbox, multi: true } ],
|
||||||
encapsulation: ViewEncapsulation.None,
|
encapsulation: ViewEncapsulation.None,
|
||||||
})
|
})
|
||||||
export class Checkbox extends BaseInput<boolean> implements IonicTapInput, AfterViewInit, OnDestroy {
|
export class Checkbox extends BaseInput<boolean> implements IonicTapInput, OnDestroy {
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @input {boolean} If true, the element is selected.
|
* @input {boolean} If true, the element is selected.
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
import { AfterViewInit, Component, ElementRef, EventEmitter, HostListener, Input, OnDestroy, Optional, Output, Renderer, ViewEncapsulation } from '@angular/core';
|
import { AfterContentInit, Component, ElementRef, EventEmitter, HostListener, Input, OnDestroy, Optional, Output, Renderer, ViewEncapsulation } from '@angular/core';
|
||||||
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
|
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
|
||||||
|
|
||||||
import { Config } from '../../config/config';
|
import { Config } from '../../config/config';
|
||||||
@ -267,7 +267,7 @@ import { dateValueRange, renderDateTime, renderTextFormat, convertDataToISO, con
|
|||||||
providers: [ { provide: NG_VALUE_ACCESSOR, useExisting: DateTime, multi: true } ],
|
providers: [ { provide: NG_VALUE_ACCESSOR, useExisting: DateTime, multi: true } ],
|
||||||
encapsulation: ViewEncapsulation.None,
|
encapsulation: ViewEncapsulation.None,
|
||||||
})
|
})
|
||||||
export class DateTime extends BaseInput<DateTimeData> implements AfterViewInit, ControlValueAccessor, OnDestroy {
|
export class DateTime extends BaseInput<DateTimeData> implements AfterContentInit, ControlValueAccessor, OnDestroy {
|
||||||
|
|
||||||
_text: string = '';
|
_text: string = '';
|
||||||
_min: DateTimeData;
|
_min: DateTimeData;
|
||||||
@ -425,7 +425,7 @@ export class DateTime extends BaseInput<DateTimeData> implements AfterViewInit,
|
|||||||
/**
|
/**
|
||||||
* @hidden
|
* @hidden
|
||||||
*/
|
*/
|
||||||
ngAfterViewInit() {
|
ngAfterContentInit() {
|
||||||
// first see if locale names were provided in the inputs
|
// first see if locale names were provided in the inputs
|
||||||
// then check to see if they're in the config
|
// then check to see if they're in the config
|
||||||
// if neither were provided then it will use default English names
|
// if neither were provided then it will use default English names
|
||||||
|
@ -144,7 +144,7 @@ describe('DateTime', () => {
|
|||||||
describe('writeValue', () => {
|
describe('writeValue', () => {
|
||||||
|
|
||||||
it('should updateText with default MMM D, YYYY when no displayFormat or pickerFormat', zoned(() => {
|
it('should updateText with default MMM D, YYYY when no displayFormat or pickerFormat', zoned(() => {
|
||||||
datetime.ngAfterViewInit();
|
datetime.ngAfterContentInit();
|
||||||
datetime.writeValue('1994-12-15T13:47:20.789Z');
|
datetime.writeValue('1994-12-15T13:47:20.789Z');
|
||||||
|
|
||||||
expect(datetime._text).toEqual('Dec 15, 1994');
|
expect(datetime._text).toEqual('Dec 15, 1994');
|
||||||
@ -152,7 +152,7 @@ describe('DateTime', () => {
|
|||||||
|
|
||||||
it('should updateText with pickerFormat when no displayFormat', zoned(() => {
|
it('should updateText with pickerFormat when no displayFormat', zoned(() => {
|
||||||
datetime.pickerFormat = 'YYYY';
|
datetime.pickerFormat = 'YYYY';
|
||||||
datetime.ngAfterViewInit();
|
datetime.ngAfterContentInit();
|
||||||
datetime.writeValue('1994-12-15T13:47:20.789Z');
|
datetime.writeValue('1994-12-15T13:47:20.789Z');
|
||||||
|
|
||||||
expect(datetime._text).toEqual('1994');
|
expect(datetime._text).toEqual('1994');
|
||||||
@ -160,7 +160,7 @@ describe('DateTime', () => {
|
|||||||
|
|
||||||
it('should updateText with displayFormat when no pickerFormat', zoned(() => {
|
it('should updateText with displayFormat when no pickerFormat', zoned(() => {
|
||||||
datetime.displayFormat = 'YYYY';
|
datetime.displayFormat = 'YYYY';
|
||||||
datetime.ngAfterViewInit();
|
datetime.ngAfterContentInit();
|
||||||
datetime.writeValue('1994-12-15T13:47:20.789Z');
|
datetime.writeValue('1994-12-15T13:47:20.789Z');
|
||||||
|
|
||||||
expect(datetime._text).toEqual('1994');
|
expect(datetime._text).toEqual('1994');
|
||||||
@ -172,7 +172,7 @@ describe('DateTime', () => {
|
|||||||
|
|
||||||
it('should generate with default MMM D, YYYY when no displayFormat or pickerFormat', zoned(() => {
|
it('should generate with default MMM D, YYYY when no displayFormat or pickerFormat', zoned(() => {
|
||||||
datetime.monthShortNames = customLocale.monthShortNames;
|
datetime.monthShortNames = customLocale.monthShortNames;
|
||||||
datetime.ngAfterViewInit();
|
datetime.ngAfterContentInit();
|
||||||
datetime.setValue('1994-12-15T13:47:20.789Z');
|
datetime.setValue('1994-12-15T13:47:20.789Z');
|
||||||
|
|
||||||
datetime.generate();
|
datetime.generate();
|
||||||
@ -186,7 +186,7 @@ describe('DateTime', () => {
|
|||||||
|
|
||||||
it('should generate with only displayFormat', zoned(() => {
|
it('should generate with only displayFormat', zoned(() => {
|
||||||
datetime.monthShortNames = customLocale.monthShortNames;
|
datetime.monthShortNames = customLocale.monthShortNames;
|
||||||
datetime.ngAfterViewInit();
|
datetime.ngAfterContentInit();
|
||||||
datetime.displayFormat = 'YYYY';
|
datetime.displayFormat = 'YYYY';
|
||||||
datetime.setValue('1994-12-15T13:47:20.789Z');
|
datetime.setValue('1994-12-15T13:47:20.789Z');
|
||||||
|
|
||||||
@ -199,7 +199,7 @@ describe('DateTime', () => {
|
|||||||
|
|
||||||
it('should generate with only pickerFormat', zoned(() => {
|
it('should generate with only pickerFormat', zoned(() => {
|
||||||
datetime.monthShortNames = customLocale.monthShortNames;
|
datetime.monthShortNames = customLocale.monthShortNames;
|
||||||
datetime.ngAfterViewInit();
|
datetime.ngAfterContentInit();
|
||||||
datetime.pickerFormat = 'YYYY';
|
datetime.pickerFormat = 'YYYY';
|
||||||
datetime.setValue('1994-12-15T13:47:20.789Z');
|
datetime.setValue('1994-12-15T13:47:20.789Z');
|
||||||
|
|
||||||
@ -212,7 +212,7 @@ describe('DateTime', () => {
|
|||||||
|
|
||||||
it('should generate with custom locale short month names from input property', zoned(() => {
|
it('should generate with custom locale short month names from input property', zoned(() => {
|
||||||
datetime.monthShortNames = customLocale.monthShortNames;
|
datetime.monthShortNames = customLocale.monthShortNames;
|
||||||
datetime.ngAfterViewInit();
|
datetime.ngAfterContentInit();
|
||||||
datetime.pickerFormat = 'MMM YYYY';
|
datetime.pickerFormat = 'MMM YYYY';
|
||||||
datetime.setValue('1994-12-15T13:47:20.789Z');
|
datetime.setValue('1994-12-15T13:47:20.789Z');
|
||||||
|
|
||||||
@ -227,7 +227,7 @@ describe('DateTime', () => {
|
|||||||
|
|
||||||
it('should generate with custom locale full month names from input property', zoned(() => {
|
it('should generate with custom locale full month names from input property', zoned(() => {
|
||||||
datetime.monthNames = customLocale.monthNames;
|
datetime.monthNames = customLocale.monthNames;
|
||||||
datetime.ngAfterViewInit();
|
datetime.ngAfterContentInit();
|
||||||
datetime.pickerFormat = 'MMMM YYYY';
|
datetime.pickerFormat = 'MMMM YYYY';
|
||||||
datetime.setValue('1994-12-15T13:47:20.789Z');
|
datetime.setValue('1994-12-15T13:47:20.789Z');
|
||||||
|
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, Input, OnDestroy, Optional, Renderer, ViewChild, ViewEncapsulation } from '@angular/core';
|
import { AfterContentInit, ChangeDetectorRef, Component, ElementRef, Input, OnDestroy, Optional, Renderer, ViewChild, ViewEncapsulation } from '@angular/core';
|
||||||
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
|
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
|
||||||
|
|
||||||
import { clamp, isTrueProperty } from '../../util/util';
|
import { clamp, isTrueProperty } from '../../util/util';
|
||||||
@ -104,7 +104,7 @@ import { UIEventManager } from '../../gestures/ui-event-manager';
|
|||||||
providers: [ { provide: NG_VALUE_ACCESSOR, useExisting: Range, multi: true } ],
|
providers: [ { provide: NG_VALUE_ACCESSOR, useExisting: Range, multi: true } ],
|
||||||
encapsulation: ViewEncapsulation.None,
|
encapsulation: ViewEncapsulation.None,
|
||||||
})
|
})
|
||||||
export class Range extends BaseInput<any> implements AfterViewInit, ControlValueAccessor, OnDestroy {
|
export class Range extends BaseInput<any> implements AfterContentInit, ControlValueAccessor, OnDestroy {
|
||||||
|
|
||||||
_dual: boolean;
|
_dual: boolean;
|
||||||
_pin: boolean;
|
_pin: boolean;
|
||||||
@ -266,7 +266,7 @@ export class Range extends BaseInput<any> implements AfterViewInit, ControlValue
|
|||||||
/**
|
/**
|
||||||
* @hidden
|
* @hidden
|
||||||
*/
|
*/
|
||||||
ngAfterViewInit() {
|
ngAfterContentInit() {
|
||||||
this._initialize();
|
this._initialize();
|
||||||
|
|
||||||
// add touchstart/mousedown listeners
|
// add touchstart/mousedown listeners
|
||||||
|
@ -172,15 +172,6 @@ export class Searchbar extends BaseInput<string> {
|
|||||||
|
|
||||||
@ViewChild('cancelButton', {read: ElementRef}) _cancelButton: ElementRef;
|
@ViewChild('cancelButton', {read: ElementRef}) _cancelButton: ElementRef;
|
||||||
|
|
||||||
/**
|
|
||||||
* @hidden
|
|
||||||
* After View Checked position the elements
|
|
||||||
*/
|
|
||||||
ngAfterViewInit() {
|
|
||||||
this._initialize();
|
|
||||||
this.positionElements();
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @hidden
|
* @hidden
|
||||||
* On Initialization check for attributes
|
* On Initialization check for attributes
|
||||||
@ -196,11 +187,9 @@ export class Searchbar extends BaseInput<string> {
|
|||||||
* @hidden
|
* @hidden
|
||||||
*/
|
*/
|
||||||
_inputUpdated() {
|
_inputUpdated() {
|
||||||
if (this._searchbarInput) {
|
const ele = this._searchbarInput.nativeElement;
|
||||||
var ele = this._searchbarInput.nativeElement;
|
if (ele) {
|
||||||
if (ele) {
|
ele.value = this.value;
|
||||||
ele.value = this.value;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
this.positionElements();
|
this.positionElements();
|
||||||
}
|
}
|
||||||
@ -229,9 +218,6 @@ export class Searchbar extends BaseInput<string> {
|
|||||||
}
|
}
|
||||||
|
|
||||||
positionPlaceholder() {
|
positionPlaceholder() {
|
||||||
if (!this._searchbarInput || !this._searchbarIcon) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const inputEle = this._searchbarInput.nativeElement;
|
const inputEle = this._searchbarInput.nativeElement;
|
||||||
const iconEle = this._searchbarIcon.nativeElement;
|
const iconEle = this._searchbarIcon.nativeElement;
|
||||||
|
|
||||||
@ -265,9 +251,6 @@ export class Searchbar extends BaseInput<string> {
|
|||||||
* Show the iOS Cancel button on focus, hide it offscreen otherwise
|
* Show the iOS Cancel button on focus, hide it offscreen otherwise
|
||||||
*/
|
*/
|
||||||
positionCancelButton() {
|
positionCancelButton() {
|
||||||
if (!this._cancelButton || !this._cancelButton.nativeElement) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const showShowCancel = this._isFocus;
|
const showShowCancel = this._isFocus;
|
||||||
if (showShowCancel !== this._isCancelVisible) {
|
if (showShowCancel !== this._isCancelVisible) {
|
||||||
var cancelStyleEle = this._cancelButton.nativeElement;
|
var cancelStyleEle = this._cancelButton.nativeElement;
|
||||||
|
@ -44,4 +44,10 @@
|
|||||||
<p padding>
|
<p padding>
|
||||||
<button ion-button block (click)="changeValue()">Change Value</button>
|
<button ion-button block (click)="changeValue()">Change Value</button>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
|
<button ion-button (click)="activeTab = 'a'">Error Please</button>
|
||||||
|
<div *ngIf="activeTab == 'a'">
|
||||||
|
<ion-searchbar animated="true" [showCancelButton]="true"></ion-searchbar>
|
||||||
|
</div>
|
||||||
|
|
||||||
</ion-content>
|
</ion-content>
|
@ -13,6 +13,7 @@ export class RootPage {
|
|||||||
isAutocorrect: string = 'on';
|
isAutocorrect: string = 'on';
|
||||||
isAutocomplete: string = 'on';
|
isAutocomplete: string = 'on';
|
||||||
isSpellcheck: boolean = true;
|
isSpellcheck: boolean = true;
|
||||||
|
activeTab = '';
|
||||||
|
|
||||||
constructor(private changeDetectorRef: ChangeDetectorRef) {
|
constructor(private changeDetectorRef: ChangeDetectorRef) {
|
||||||
|
|
||||||
|
@ -1,8 +1,9 @@
|
|||||||
import { ContentChildren, Directive, ElementRef, Optional, QueryList, Renderer } from '@angular/core';
|
import { AfterContentInit, ContentChildren, Directive, ElementRef, Optional, QueryList, Renderer } from '@angular/core';
|
||||||
import { NgControl } from '@angular/forms';
|
import { NgControl } from '@angular/forms';
|
||||||
|
|
||||||
import { Config } from '../../config/config';
|
import { Config } from '../../config/config';
|
||||||
import { BaseInput } from '../../util/base-input';
|
import { BaseInput } from '../../util/base-input';
|
||||||
|
import { assert } from '../../util/util';
|
||||||
import { SegmentButton } from './segment-button';
|
import { SegmentButton } from './segment-button';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -67,7 +68,7 @@ import { SegmentButton } from './segment-button';
|
|||||||
'[class.segment-disabled]': '_disabled'
|
'[class.segment-disabled]': '_disabled'
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
export class Segment extends BaseInput<string> {
|
export class Segment extends BaseInput<string> implements AfterContentInit {
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @hidden
|
* @hidden
|
||||||
@ -86,7 +87,7 @@ export class Segment extends BaseInput<string> {
|
|||||||
/**
|
/**
|
||||||
* @hidden
|
* @hidden
|
||||||
*/
|
*/
|
||||||
ngAfterViewInit() {
|
ngAfterContentInit() {
|
||||||
this._initialize();
|
this._initialize();
|
||||||
this._buttons.forEach(button => {
|
this._buttons.forEach(button => {
|
||||||
button.ionSelect.subscribe((selectedButton: any) => this.value = selectedButton.value);
|
button.ionSelect.subscribe((selectedButton: any) => this.value = selectedButton.value);
|
||||||
@ -98,12 +99,14 @@ export class Segment extends BaseInput<string> {
|
|||||||
* Write a new value to the element.
|
* Write a new value to the element.
|
||||||
*/
|
*/
|
||||||
_inputUpdated() {
|
_inputUpdated() {
|
||||||
if (this._buttons) {
|
if (!this._buttons) {
|
||||||
var buttons = this._buttons.toArray();
|
assert(false, 'buttons are undefined');
|
||||||
var value = this.value;
|
return;
|
||||||
for (var button of buttons) {
|
}
|
||||||
button.isActive = (button.value === value);
|
const buttons = this._buttons.toArray();
|
||||||
}
|
const value = this.value;
|
||||||
|
for (var button of buttons) {
|
||||||
|
button.isActive = (button.value === value);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
import { AfterViewInit, Component, ContentChildren, ElementRef, EventEmitter, Input, HostListener, OnDestroy, Optional, Output, Renderer, QueryList, ViewEncapsulation } from '@angular/core';
|
import { Component, ContentChildren, ElementRef, EventEmitter, Input, HostListener, OnDestroy, Optional, Output, Renderer, QueryList, ViewEncapsulation } from '@angular/core';
|
||||||
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
||||||
|
|
||||||
import { ActionSheet } from '../action-sheet/action-sheet';
|
import { ActionSheet } from '../action-sheet/action-sheet';
|
||||||
@ -147,7 +147,7 @@ import { SelectPopover, SelectPopoverOption } from './select-popover-component';
|
|||||||
providers: [ { provide: NG_VALUE_ACCESSOR, useExisting: Select, multi: true } ],
|
providers: [ { provide: NG_VALUE_ACCESSOR, useExisting: Select, multi: true } ],
|
||||||
encapsulation: ViewEncapsulation.None,
|
encapsulation: ViewEncapsulation.None,
|
||||||
})
|
})
|
||||||
export class Select extends BaseInput<any> implements AfterViewInit, OnDestroy {
|
export class Select extends BaseInput<any> implements OnDestroy {
|
||||||
|
|
||||||
_multi: boolean = false;
|
_multi: boolean = false;
|
||||||
_options: QueryList<Option>;
|
_options: QueryList<Option>;
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
import { ElementRef, EventEmitter, Input, NgZone, Output, Renderer } from '@angular/core';
|
import { AfterContentInit, ElementRef, EventEmitter, Input, NgZone, Output, Renderer } from '@angular/core';
|
||||||
import { ControlValueAccessor } from '@angular/forms';
|
import { ControlValueAccessor } from '@angular/forms';
|
||||||
import { NgControl } from '@angular/forms';
|
import { NgControl } from '@angular/forms';
|
||||||
|
|
||||||
@ -10,7 +10,7 @@ import { Form } from './form';
|
|||||||
import { TimeoutDebouncer } from './debouncer';
|
import { TimeoutDebouncer } from './debouncer';
|
||||||
|
|
||||||
|
|
||||||
export interface CommonInput<T> extends ControlValueAccessor {
|
export interface CommonInput<T> extends ControlValueAccessor, AfterContentInit {
|
||||||
|
|
||||||
id: string;
|
id: string;
|
||||||
disabled: boolean;
|
disabled: boolean;
|
||||||
@ -271,7 +271,7 @@ export class BaseInput<T> extends Ion implements CommonInput<T> {
|
|||||||
/**
|
/**
|
||||||
* @hidden
|
* @hidden
|
||||||
*/
|
*/
|
||||||
ngAfterViewInit() {
|
ngAfterContentInit() {
|
||||||
this._initialize();
|
this._initialize();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -55,7 +55,7 @@ export function commonInputTest<T>(input: BaseInput<T>, config: TestConfig) {
|
|||||||
const zone = new NgZone(true);
|
const zone = new NgZone(true);
|
||||||
zone.run(() => {
|
zone.run(() => {
|
||||||
testInput(input, config, false);
|
testInput(input, config, false);
|
||||||
input.ngAfterViewInit();
|
input.ngAfterContentInit();
|
||||||
testInput(input, config, true);
|
testInput(input, config, true);
|
||||||
input.ngOnDestroy();
|
input.ngOnDestroy();
|
||||||
assert(!input._init, 'input was not destroyed correctly');
|
assert(!input._init, 'input was not destroyed correctly');
|
||||||
|
Reference in New Issue
Block a user