refactor(core): Removed deprecated Query and ViewQuery (#10820)
BREAKING CHANGE: previously deprecated Query and ViewQuery were removed; see deprecation notice for migration instructions.
This commit is contained in:
parent
4a9745ef78
commit
48751cceae
|
@ -191,10 +191,6 @@ export class StaticReflector implements ReflectorReader {
|
||||||
this.host.findDeclaration(diDecorators, 'Optional'), OptionalMetadata);
|
this.host.findDeclaration(diDecorators, 'Optional'), OptionalMetadata);
|
||||||
this.registerDecoratorOrConstructor(
|
this.registerDecoratorOrConstructor(
|
||||||
this.host.findDeclaration(coreDecorators, 'Attribute'), AttributeMetadata);
|
this.host.findDeclaration(coreDecorators, 'Attribute'), AttributeMetadata);
|
||||||
this.registerDecoratorOrConstructor(
|
|
||||||
this.host.findDeclaration(coreDecorators, 'Query'), QueryMetadata);
|
|
||||||
this.registerDecoratorOrConstructor(
|
|
||||||
this.host.findDeclaration(coreDecorators, 'ViewQuery'), ViewQueryMetadata);
|
|
||||||
this.registerDecoratorOrConstructor(
|
this.registerDecoratorOrConstructor(
|
||||||
this.host.findDeclaration(coreDecorators, 'ContentChild'), ContentChildMetadata);
|
this.host.findDeclaration(coreDecorators, 'ContentChild'), ContentChildMetadata);
|
||||||
this.registerDecoratorOrConstructor(
|
this.registerDecoratorOrConstructor(
|
||||||
|
|
|
@ -171,58 +171,6 @@ export interface AttributeMetadataFactory {
|
||||||
new (name: string): AttributeMetadata;
|
new (name: string): AttributeMetadata;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* {@link QueryMetadata} factory for creating annotations, decorators or DSL.
|
|
||||||
*
|
|
||||||
* ### Example as TypeScript Decorator
|
|
||||||
*
|
|
||||||
* ```
|
|
||||||
* import {Query, QueryList, Component} from '@angular/core';
|
|
||||||
*
|
|
||||||
* @Component({...})
|
|
||||||
* class MyComponent {
|
|
||||||
* constructor(@Query(SomeType) queryList: QueryList<SomeType>) {
|
|
||||||
* ...
|
|
||||||
* }
|
|
||||||
* }
|
|
||||||
* ```
|
|
||||||
*
|
|
||||||
* ### Example as ES5 DSL
|
|
||||||
*
|
|
||||||
* ```
|
|
||||||
* var MyComponent = ng
|
|
||||||
* .Component({...})
|
|
||||||
* .Class({
|
|
||||||
* constructor: [new ng.Query(SomeType), function(queryList) {
|
|
||||||
* ...
|
|
||||||
* }]
|
|
||||||
* })
|
|
||||||
* ```
|
|
||||||
*
|
|
||||||
* ### Example as ES5 annotation
|
|
||||||
*
|
|
||||||
* ```
|
|
||||||
* var MyComponent = function(queryList) {
|
|
||||||
* ...
|
|
||||||
* };
|
|
||||||
*
|
|
||||||
* MyComponent.annotations = [
|
|
||||||
* new ng.Component({...})
|
|
||||||
* ]
|
|
||||||
* MyComponent.parameters = [
|
|
||||||
* [new ng.Query(SomeType)]
|
|
||||||
* ]
|
|
||||||
* ```
|
|
||||||
* @deprecated
|
|
||||||
*/
|
|
||||||
export interface QueryMetadataFactory {
|
|
||||||
(selector: Type<any>|Function|string,
|
|
||||||
{descendants, read}?: {descendants?: boolean, read?: any}): ParameterDecorator;
|
|
||||||
new (
|
|
||||||
selector: Type<any>|Function|string,
|
|
||||||
{descendants, read}?: {descendants?: boolean, read?: any}): QueryMetadata;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Factory for {@link ContentChildren}.
|
* Factory for {@link ContentChildren}.
|
||||||
* @stable
|
* @stable
|
||||||
|
@ -763,117 +711,6 @@ export var Directive: DirectiveMetadataFactory =
|
||||||
*/
|
*/
|
||||||
export var Attribute: AttributeMetadataFactory = makeParamDecorator(AttributeMetadata);
|
export var Attribute: AttributeMetadataFactory = makeParamDecorator(AttributeMetadata);
|
||||||
|
|
||||||
// TODO(alexeagle): remove the duplication of this doc. It is copied from QueryMetadata.
|
|
||||||
/**
|
|
||||||
* Declares an injectable parameter to be a live list of directives or variable
|
|
||||||
* bindings from the content children of a directive.
|
|
||||||
*
|
|
||||||
* ### Example ([live demo](http://plnkr.co/edit/lY9m8HLy7z06vDoUaSN2?p=preview))
|
|
||||||
*
|
|
||||||
* Assume that `<tabs>` component would like to get a list its children `<pane>`
|
|
||||||
* components as shown in this example:
|
|
||||||
*
|
|
||||||
* ```html
|
|
||||||
* <tabs>
|
|
||||||
* <pane title="Overview">...</pane>
|
|
||||||
* <pane *ngFor="let o of objects" [title]="o.title">{{o.text}}</pane>
|
|
||||||
* </tabs>
|
|
||||||
* ```
|
|
||||||
*
|
|
||||||
* The preferred solution is to query for `Pane` directives using this decorator.
|
|
||||||
*
|
|
||||||
* ```javascript
|
|
||||||
* @Component({
|
|
||||||
* selector: 'pane',
|
|
||||||
* inputs: ['title']
|
|
||||||
* })
|
|
||||||
* class Pane {
|
|
||||||
* title:string;
|
|
||||||
* }
|
|
||||||
*
|
|
||||||
* @Component({
|
|
||||||
* selector: 'tabs',
|
|
||||||
* template: `
|
|
||||||
* <ul>
|
|
||||||
* <li *ngFor="let pane of panes">{{pane.title}}</li>
|
|
||||||
* </ul>
|
|
||||||
* <ng-content></ng-content>
|
|
||||||
* `
|
|
||||||
* })
|
|
||||||
* class Tabs {
|
|
||||||
* panes: QueryList<Pane>;
|
|
||||||
* constructor(@Query(Pane) panes:QueryList<Pane>) {
|
|
||||||
* this.panes = panes;
|
|
||||||
* }
|
|
||||||
* }
|
|
||||||
* ```
|
|
||||||
*
|
|
||||||
* A query can look for variable bindings by passing in a string with desired binding symbol.
|
|
||||||
*
|
|
||||||
* ### Example ([live demo](http://plnkr.co/edit/sT2j25cH1dURAyBRCKx1?p=preview))
|
|
||||||
* ```html
|
|
||||||
* <seeker>
|
|
||||||
* <div #findme>...</div>
|
|
||||||
* </seeker>
|
|
||||||
*
|
|
||||||
* @Component({ selector: 'seeker' })
|
|
||||||
* class seeker {
|
|
||||||
* constructor(@Query('findme') elList: QueryList<ElementRef>) {...}
|
|
||||||
* }
|
|
||||||
* ```
|
|
||||||
*
|
|
||||||
* In this case the object that is injected depend on the type of the variable
|
|
||||||
* binding. It can be an ElementRef, a directive or a component.
|
|
||||||
*
|
|
||||||
* Passing in a comma separated list of variable bindings will query for all of them.
|
|
||||||
*
|
|
||||||
* ```html
|
|
||||||
* <seeker>
|
|
||||||
* <div #findMe>...</div>
|
|
||||||
* <div #findMeToo>...</div>
|
|
||||||
* </seeker>
|
|
||||||
*
|
|
||||||
* @Component({
|
|
||||||
* selector: 'seeker'
|
|
||||||
* })
|
|
||||||
* class Seeker {
|
|
||||||
* constructor(@Query('findMe, findMeToo') elList: QueryList<ElementRef>) {...}
|
|
||||||
* }
|
|
||||||
* ```
|
|
||||||
*
|
|
||||||
* Configure whether query looks for direct children or all descendants
|
|
||||||
* of the querying element, by using the `descendants` parameter.
|
|
||||||
* It is set to `false` by default.
|
|
||||||
*
|
|
||||||
* ### Example ([live demo](http://plnkr.co/edit/wtGeB977bv7qvA5FTYl9?p=preview))
|
|
||||||
* ```html
|
|
||||||
* <container #first>
|
|
||||||
* <item>a</item>
|
|
||||||
* <item>b</item>
|
|
||||||
* <container #second>
|
|
||||||
* <item>c</item>
|
|
||||||
* </container>
|
|
||||||
* </container>
|
|
||||||
* ```
|
|
||||||
*
|
|
||||||
* When querying for items, the first container will see only `a` and `b` by default,
|
|
||||||
* but with `Query(TextDirective, {descendants: true})` it will see `c` too.
|
|
||||||
*
|
|
||||||
* The queried directives are kept in a depth-first pre-order with respect to their
|
|
||||||
* positions in the DOM.
|
|
||||||
*
|
|
||||||
* Query does not look deep into any subcomponent views.
|
|
||||||
*
|
|
||||||
* Query is updated as part of the change-detection cycle. Since change detection
|
|
||||||
* happens after construction of a directive, QueryList will always be empty when observed in the
|
|
||||||
* constructor.
|
|
||||||
*
|
|
||||||
* The injected object is an unmodifiable live list.
|
|
||||||
* See {@link QueryList} for more details.
|
|
||||||
* @deprecated
|
|
||||||
* @Annotation
|
|
||||||
*/
|
|
||||||
export var Query: QueryMetadataFactory = makeParamDecorator(QueryMetadata);
|
|
||||||
|
|
||||||
// TODO(alexeagle): remove the duplication of this doc. It is copied from ContentChildrenMetadata.
|
// TODO(alexeagle): remove the duplication of this doc. It is copied from ContentChildrenMetadata.
|
||||||
/**
|
/**
|
||||||
|
@ -1094,46 +931,6 @@ export var ViewChildren: ViewChildrenMetadataFactory = makePropDecorator(ViewChi
|
||||||
*/
|
*/
|
||||||
export var ViewChild: ViewChildMetadataFactory = makePropDecorator(ViewChildMetadata);
|
export var ViewChild: ViewChildMetadataFactory = makePropDecorator(ViewChildMetadata);
|
||||||
|
|
||||||
// TODO(alexeagle): remove the duplication of this doc. It is copied from ViewQueryMetadata.
|
|
||||||
/**
|
|
||||||
* Similar to {@link QueryMetadata}, but querying the component view, instead of
|
|
||||||
* the content children.
|
|
||||||
*
|
|
||||||
* ### Example ([live demo](http://plnkr.co/edit/eNsFHDf7YjyM6IzKxM1j?p=preview))
|
|
||||||
*
|
|
||||||
* ```javascript
|
|
||||||
* @Component({
|
|
||||||
* ...,
|
|
||||||
* template: `
|
|
||||||
* <item> a </item>
|
|
||||||
* <item> b </item>
|
|
||||||
* <item> c </item>
|
|
||||||
* `
|
|
||||||
* })
|
|
||||||
* class MyComponent {
|
|
||||||
* shown: boolean;
|
|
||||||
*
|
|
||||||
* constructor(private @Query(Item) items:QueryList<Item>) {
|
|
||||||
* items.changes.subscribe(() => console.log(items.length));
|
|
||||||
* }
|
|
||||||
* }
|
|
||||||
* ```
|
|
||||||
*
|
|
||||||
* Supports the same querying parameters as {@link QueryMetadata}, except
|
|
||||||
* `descendants`. This always queries the whole view.
|
|
||||||
*
|
|
||||||
* As `shown` is flipped between true and false, items will contain zero of one
|
|
||||||
* items.
|
|
||||||
*
|
|
||||||
* Specifies that a {@link QueryList} should be injected.
|
|
||||||
*
|
|
||||||
* The injected object is an iterable and observable live list.
|
|
||||||
* See {@link QueryList} for more details.
|
|
||||||
* @deprecated
|
|
||||||
* @Annotation
|
|
||||||
*/
|
|
||||||
export var ViewQuery: QueryMetadataFactory = makeParamDecorator(ViewQueryMetadata);
|
|
||||||
|
|
||||||
// TODO(alexeagle): remove the duplication of this doc. It is copied from PipeMetadata.
|
// TODO(alexeagle): remove the duplication of this doc. It is copied from PipeMetadata.
|
||||||
/**
|
/**
|
||||||
* Declare reusable pipe function.
|
* Declare reusable pipe function.
|
||||||
|
|
|
@ -117,10 +117,7 @@ export class AttributeMetadata extends DependencyMetadata {
|
||||||
* `
|
* `
|
||||||
* })
|
* })
|
||||||
* class Tabs {
|
* class Tabs {
|
||||||
* panes: QueryList<Pane>;
|
* @ContentChildren(Pane) panes: QueryList<Pane>;
|
||||||
* constructor(@Query(Pane) panes:QueryList<Pane>) {
|
|
||||||
* this.panes = panes;
|
|
||||||
* }
|
|
||||||
* }
|
* }
|
||||||
* ```
|
* ```
|
||||||
*
|
*
|
||||||
|
@ -134,7 +131,7 @@ export class AttributeMetadata extends DependencyMetadata {
|
||||||
*
|
*
|
||||||
* @Component({ selector: 'seeker' })
|
* @Component({ selector: 'seeker' })
|
||||||
* class Seeker {
|
* class Seeker {
|
||||||
* constructor(@Query('findme') elList: QueryList<ElementRef>) {...}
|
* @ContentChildren('findme') elList;
|
||||||
* }
|
* }
|
||||||
* ```
|
* ```
|
||||||
*
|
*
|
||||||
|
@ -153,7 +150,7 @@ export class AttributeMetadata extends DependencyMetadata {
|
||||||
* selector: 'seeker'
|
* selector: 'seeker'
|
||||||
* })
|
* })
|
||||||
* class Seeker {
|
* class Seeker {
|
||||||
* constructor(@Query('findMe, findMeToo') elList: QueryList<ElementRef>) {...}
|
* @ContentChildren('findMe, findMeToo') elList: QueryList<ElementRef>;
|
||||||
* }
|
* }
|
||||||
* ```
|
* ```
|
||||||
*
|
*
|
||||||
|
@ -173,20 +170,20 @@ export class AttributeMetadata extends DependencyMetadata {
|
||||||
* ```
|
* ```
|
||||||
*
|
*
|
||||||
* When querying for items, the first container will see only `a` and `b` by default,
|
* When querying for items, the first container will see only `a` and `b` by default,
|
||||||
* but with `Query(TextDirective, {descendants: true})` it will see `c` too.
|
* but with `ContentChildren(TextDirective, {descendants: true})` it will see `c` too.
|
||||||
*
|
*
|
||||||
* The queried directives are kept in a depth-first pre-order with respect to their
|
* The queried directives are kept in a depth-first pre-order with respect to their
|
||||||
* positions in the DOM.
|
* positions in the DOM.
|
||||||
*
|
*
|
||||||
* Query does not look deep into any subcomponent views.
|
* ContentChildren does not look deep into any subcomponent views.
|
||||||
*
|
*
|
||||||
* Query is updated as part of the change-detection cycle. Since change detection
|
* ContentChildren is updated as part of the change-detection cycle. Since change detection
|
||||||
* happens after construction of a directive, QueryList will always be empty when observed in the
|
* happens after construction of a directive, QueryList will always be empty when observed in the
|
||||||
* constructor.
|
* constructor.
|
||||||
*
|
*
|
||||||
* The injected object is an unmodifiable live list.
|
* The injected object is an unmodifiable live list.
|
||||||
* See {@link QueryList} for more details.
|
* See {@link QueryList} for more details.
|
||||||
* @deprecated
|
* @stable
|
||||||
*/
|
*/
|
||||||
export class QueryMetadata extends DependencyMetadata {
|
export class QueryMetadata extends DependencyMetadata {
|
||||||
/**
|
/**
|
||||||
|
@ -293,8 +290,8 @@ export class ContentChildMetadata extends QueryMetadata {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Similar to {@link QueryMetadata}, but querying the component view, instead of
|
* Similar to {@link ContentChildMetadata}, but querying the component view, instead
|
||||||
* the content children.
|
* of the content children.
|
||||||
*
|
*
|
||||||
* ### Example ([live demo](http://plnkr.co/edit/eNsFHDf7YjyM6IzKxM1j?p=preview))
|
* ### Example ([live demo](http://plnkr.co/edit/eNsFHDf7YjyM6IzKxM1j?p=preview))
|
||||||
*
|
*
|
||||||
|
@ -310,15 +307,12 @@ export class ContentChildMetadata extends QueryMetadata {
|
||||||
* class MyComponent {
|
* class MyComponent {
|
||||||
* shown: boolean;
|
* shown: boolean;
|
||||||
*
|
*
|
||||||
* constructor(private @ViewQuery(Item) items:QueryList<Item>) {
|
* constructor(private @ViewChildren(Item) items:QueryList<Item>) {
|
||||||
* items.changes.subscribe(() => console.log(items.length));
|
* items.changes.subscribe(() => console.log(items.length));
|
||||||
* }
|
* }
|
||||||
* }
|
* }
|
||||||
* ```
|
* ```
|
||||||
*
|
*
|
||||||
* Supports the same querying parameters as {@link QueryMetadata}, except
|
|
||||||
* `descendants`. This always queries the whole view.
|
|
||||||
*
|
|
||||||
* As `shown` is flipped between true and false, items will contain zero of one
|
* As `shown` is flipped between true and false, items will contain zero of one
|
||||||
* items.
|
* items.
|
||||||
*
|
*
|
||||||
|
@ -326,7 +320,7 @@ export class ContentChildMetadata extends QueryMetadata {
|
||||||
*
|
*
|
||||||
* The injected object is an iterable and observable live list.
|
* The injected object is an iterable and observable live list.
|
||||||
* See {@link QueryList} for more details.
|
* See {@link QueryList} for more details.
|
||||||
* @deprecated
|
* @stable
|
||||||
*/
|
*/
|
||||||
export class ViewQueryMetadata extends QueryMetadata {
|
export class ViewQueryMetadata extends QueryMetadata {
|
||||||
constructor(
|
constructor(
|
||||||
|
@ -339,7 +333,6 @@ export class ViewQueryMetadata extends QueryMetadata {
|
||||||
* always `true` to differentiate it with {@link QueryMetadata}.
|
* always `true` to differentiate it with {@link QueryMetadata}.
|
||||||
*/
|
*/
|
||||||
get isViewQuery() { return true; }
|
get isViewQuery() { return true; }
|
||||||
toString(): string { return `@ViewQuery(${stringify(this.selector)})`; }
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -424,6 +417,7 @@ export class ViewChildrenMetadata extends ViewQueryMetadata {
|
||||||
constructor(_selector: Type<any>|string, {read = null}: {read?: any} = {}) {
|
constructor(_selector: Type<any>|string, {read = null}: {read?: any} = {}) {
|
||||||
super(_selector, {descendants: true, read: read});
|
super(_selector, {descendants: true, read: read});
|
||||||
}
|
}
|
||||||
|
toString(): string { return `@ViewChildren(${stringify(this.selector)})`; }
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
@ -7,7 +7,7 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import {NgFor} from '@angular/common';
|
import {NgFor} from '@angular/common';
|
||||||
import {Component, Directive, Inject, Query, QueryList, asNativeElements, bind, forwardRef, provide, resolveForwardRef} from '@angular/core';
|
import {Component, ContentChildren, Directive, Inject, QueryList, asNativeElements, bind, forwardRef, provide, resolveForwardRef} from '@angular/core';
|
||||||
import {TestComponentBuilder} from '@angular/core/testing';
|
import {TestComponentBuilder} from '@angular/core/testing';
|
||||||
import {AsyncTestCompleter, beforeEach, ddescribe, describe, iit, inject, it, xit} from '@angular/core/testing/testing_internal';
|
import {AsyncTestCompleter, beforeEach, ddescribe, describe, iit, inject, it, xit} from '@angular/core/testing/testing_internal';
|
||||||
import {expect} from '@angular/platform-browser/testing/matchers';
|
import {expect} from '@angular/platform-browser/testing/matchers';
|
||||||
|
@ -42,15 +42,10 @@ class App {
|
||||||
template: `{{frame.name}}(<span *ngFor="let lock of locks">{{lock.name}}</span>)`,
|
template: `{{frame.name}}(<span *ngFor="let lock of locks">{{lock.name}}</span>)`,
|
||||||
})
|
})
|
||||||
class Door {
|
class Door {
|
||||||
locks: QueryList<Lock>;
|
@ContentChildren(forwardRef(() => Lock)) locks: QueryList<Lock>;
|
||||||
frame: Frame;
|
frame: Frame;
|
||||||
|
|
||||||
constructor(
|
constructor(@Inject(forwardRef(() => Frame)) frame: Frame) { this.frame = frame; }
|
||||||
@Query(forwardRef(() => Lock)) locks: QueryList<Lock>,
|
|
||||||
@Inject(forwardRef(() => Frame)) frame: Frame) {
|
|
||||||
this.frame = frame;
|
|
||||||
this.locks = locks;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
class Frame {
|
class Frame {
|
||||||
|
|
|
@ -16,7 +16,7 @@ import {QueryList} from '@angular/core/src/linker/query_list';
|
||||||
import {TemplateRef, TemplateRef_} from '@angular/core/src/linker/template_ref';
|
import {TemplateRef, TemplateRef_} from '@angular/core/src/linker/template_ref';
|
||||||
import {ViewContainerRef} from '@angular/core/src/linker/view_container_ref';
|
import {ViewContainerRef} from '@angular/core/src/linker/view_container_ref';
|
||||||
import {EmbeddedViewRef} from '@angular/core/src/linker/view_ref';
|
import {EmbeddedViewRef} from '@angular/core/src/linker/view_ref';
|
||||||
import {Attribute, Component, Directive, HostBinding, HostListener, Input, Output, Pipe, Query, ViewMetadata} from '@angular/core/src/metadata';
|
import {Attribute, Component, ContentChildren, Directive, HostBinding, HostListener, Input, Output, Pipe, ViewMetadata} from '@angular/core/src/metadata';
|
||||||
import {Renderer} from '@angular/core/src/render';
|
import {Renderer} from '@angular/core/src/render';
|
||||||
import {ComponentFixture, TestBed, TestComponentBuilder, fakeAsync, tick} from '@angular/core/testing';
|
import {ComponentFixture, TestBed, TestComponentBuilder, fakeAsync, tick} from '@angular/core/testing';
|
||||||
import {AsyncTestCompleter, beforeEach, beforeEachProviders, ddescribe, describe, iit, inject, it, xdescribe, xit} from '@angular/core/testing/testing_internal';
|
import {AsyncTestCompleter, beforeEach, beforeEachProviders, ddescribe, describe, iit, inject, it, xdescribe, xit} from '@angular/core/testing/testing_internal';
|
||||||
|
@ -2483,13 +2483,10 @@ class ToolbarViewContainer {
|
||||||
directives: [ToolbarViewContainer, NgFor]
|
directives: [ToolbarViewContainer, NgFor]
|
||||||
})
|
})
|
||||||
class ToolbarComponent {
|
class ToolbarComponent {
|
||||||
query: QueryList<ToolbarPart>;
|
@ContentChildren(ToolbarPart) query: QueryList<ToolbarPart>;
|
||||||
ctxProp: string;
|
ctxProp: string;
|
||||||
|
|
||||||
constructor(@Query(ToolbarPart) query: QueryList<ToolbarPart>) {
|
constructor() { this.ctxProp = 'hello world'; }
|
||||||
this.ctxProp = 'hello world';
|
|
||||||
this.query = query;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@Directive({selector: '[two-way]', inputs: ['control'], outputs: ['controlChange']})
|
@Directive({selector: '[two-way]', inputs: ['control'], outputs: ['controlChange']})
|
||||||
|
|
|
@ -7,7 +7,7 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import {NgFor, NgIf} from '@angular/common';
|
import {NgFor, NgIf} from '@angular/common';
|
||||||
import {AfterContentChecked, AfterContentInit, AfterViewChecked, AfterViewInit, Component, ContentChild, ContentChildren, Directive, Query, QueryList, TemplateRef, ViewChild, ViewChildren, ViewContainerRef, ViewQuery, asNativeElements} from '@angular/core';
|
import {AfterContentChecked, AfterContentInit, AfterViewChecked, AfterViewInit, Component, ContentChild, ContentChildren, Directive, QueryList, TemplateRef, ViewChild, ViewChildren, ViewContainerRef, asNativeElements} from '@angular/core';
|
||||||
import {TestComponentBuilder} from '@angular/core/testing';
|
import {TestComponentBuilder} from '@angular/core/testing';
|
||||||
import {AsyncTestCompleter, beforeEach, ddescribe, describe, iit, inject, it, xit} from '@angular/core/testing/testing_internal';
|
import {AsyncTestCompleter, beforeEach, ddescribe, describe, iit, inject, it, xit} from '@angular/core/testing/testing_internal';
|
||||||
import {expect} from '@angular/platform-browser/testing/matchers';
|
import {expect} from '@angular/platform-browser/testing/matchers';
|
||||||
|
@ -429,34 +429,6 @@ export function main() {
|
||||||
});
|
});
|
||||||
}));
|
}));
|
||||||
|
|
||||||
it('should notify child\'s query before notifying parent\'s query',
|
|
||||||
inject(
|
|
||||||
[TestComponentBuilder, AsyncTestCompleter],
|
|
||||||
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
|
|
||||||
var template = '<needs-query-desc #q1>' +
|
|
||||||
'<needs-query-desc #q2>' +
|
|
||||||
'<div text="1"></div>' +
|
|
||||||
'</needs-query-desc>' +
|
|
||||||
'</needs-query-desc>';
|
|
||||||
|
|
||||||
tcb.overrideTemplate(MyComp0, template).createAsync(MyComp0).then((view) => {
|
|
||||||
var q1 = view.debugElement.children[0].references['q1'];
|
|
||||||
var q2 = view.debugElement.children[0].children[0].references['q2'];
|
|
||||||
|
|
||||||
var firedQ2 = false;
|
|
||||||
|
|
||||||
q2.query.changes.subscribe({next: () => { firedQ2 = true; }});
|
|
||||||
q1.query.changes.subscribe({
|
|
||||||
next: () => {
|
|
||||||
expect(firedQ2).toBe(true);
|
|
||||||
async.done();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
view.detectChanges();
|
|
||||||
});
|
|
||||||
}));
|
|
||||||
|
|
||||||
it('should correctly clean-up when destroyed together with the directives it is querying',
|
it('should correctly clean-up when destroyed together with the directives it is querying',
|
||||||
inject(
|
inject(
|
||||||
[TestComponentBuilder, AsyncTestCompleter],
|
[TestComponentBuilder, AsyncTestCompleter],
|
||||||
|
@ -907,8 +879,7 @@ class InertDirective {
|
||||||
template: '<div text="ignoreme"></div><b *ngFor="let dir of query">{{dir.text}}|</b>'
|
template: '<div text="ignoreme"></div><b *ngFor="let dir of query">{{dir.text}}|</b>'
|
||||||
})
|
})
|
||||||
class NeedsQuery {
|
class NeedsQuery {
|
||||||
query: QueryList<TextDirective>;
|
@ContentChildren(TextDirective) query: QueryList<TextDirective>;
|
||||||
constructor(@Query(TextDirective) query: QueryList<TextDirective>) { this.query = query; }
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@Component({selector: 'needs-four-queries', template: ''})
|
@Component({selector: 'needs-four-queries', template: ''})
|
||||||
|
@ -925,18 +896,12 @@ class NeedsFourQueries {
|
||||||
template: '<ng-content></ng-content><div *ngFor="let dir of query">{{dir.text}}|</div>'
|
template: '<ng-content></ng-content><div *ngFor="let dir of query">{{dir.text}}|</div>'
|
||||||
})
|
})
|
||||||
class NeedsQueryDesc {
|
class NeedsQueryDesc {
|
||||||
query: QueryList<TextDirective>;
|
@ContentChildren(TextDirective, {descendants: true}) query: QueryList<TextDirective>;
|
||||||
constructor(@Query(TextDirective, {descendants: true}) query: QueryList<TextDirective>) {
|
|
||||||
this.query = query;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@Component({selector: 'needs-query-by-ref-binding', directives: [], template: '<ng-content>'})
|
@Component({selector: 'needs-query-by-ref-binding', directives: [], template: '<ng-content>'})
|
||||||
class NeedsQueryByLabel {
|
class NeedsQueryByLabel {
|
||||||
query: QueryList<any>;
|
@ContentChildren('textLabel', {descendants: true}) query: QueryList<any>;
|
||||||
constructor(@Query('textLabel', {descendants: true}) query: QueryList<any>) {
|
|
||||||
this.query = query;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
|
@ -945,16 +910,12 @@ class NeedsQueryByLabel {
|
||||||
template: '<div #textLabel>text</div>'
|
template: '<div #textLabel>text</div>'
|
||||||
})
|
})
|
||||||
class NeedsViewQueryByLabel {
|
class NeedsViewQueryByLabel {
|
||||||
query: QueryList<any>;
|
@ViewChildren('textLabel') query: QueryList<any>;
|
||||||
constructor(@ViewQuery('textLabel') query: QueryList<any>) { this.query = query; }
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@Component({selector: 'needs-query-by-ref-bindings', directives: [], template: '<ng-content>'})
|
@Component({selector: 'needs-query-by-ref-bindings', directives: [], template: '<ng-content>'})
|
||||||
class NeedsQueryByTwoLabels {
|
class NeedsQueryByTwoLabels {
|
||||||
query: QueryList<any>;
|
@ContentChildren('textLabel1,textLabel2', {descendants: true}) query: QueryList<any>;
|
||||||
constructor(@Query('textLabel1,textLabel2', {descendants: true}) query: QueryList<any>) {
|
|
||||||
this.query = query;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
|
@ -963,8 +924,7 @@ class NeedsQueryByTwoLabels {
|
||||||
template: '<div *ngFor="let dir of query">{{dir.text}}|</div><ng-content></ng-content>'
|
template: '<div *ngFor="let dir of query">{{dir.text}}|</div><ng-content></ng-content>'
|
||||||
})
|
})
|
||||||
class NeedsQueryAndProject {
|
class NeedsQueryAndProject {
|
||||||
query: QueryList<TextDirective>;
|
@ContentChildren(TextDirective) query: QueryList<TextDirective>;
|
||||||
constructor(@Query(TextDirective) query: QueryList<TextDirective>) { this.query = query; }
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
|
@ -974,8 +934,7 @@ class NeedsQueryAndProject {
|
||||||
'<div text="3"></div><div text="4"></div>'
|
'<div text="3"></div><div text="4"></div>'
|
||||||
})
|
})
|
||||||
class NeedsViewQuery {
|
class NeedsViewQuery {
|
||||||
query: QueryList<TextDirective>;
|
@ViewChildren(TextDirective) query: QueryList<TextDirective>;
|
||||||
constructor(@ViewQuery(TextDirective) query: QueryList<TextDirective>) { this.query = query; }
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
|
@ -985,11 +944,8 @@ class NeedsViewQuery {
|
||||||
})
|
})
|
||||||
class NeedsViewQueryIf {
|
class NeedsViewQueryIf {
|
||||||
show: boolean;
|
show: boolean;
|
||||||
query: QueryList<TextDirective>;
|
@ViewChildren(TextDirective) query: QueryList<TextDirective>;
|
||||||
constructor(@ViewQuery(TextDirective) query: QueryList<TextDirective>) {
|
constructor() { this.show = false; }
|
||||||
this.query = query;
|
|
||||||
this.show = false;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@ -1000,11 +956,8 @@ class NeedsViewQueryIf {
|
||||||
})
|
})
|
||||||
class NeedsViewQueryNestedIf {
|
class NeedsViewQueryNestedIf {
|
||||||
show: boolean;
|
show: boolean;
|
||||||
query: QueryList<TextDirective>;
|
@ViewChildren(TextDirective) query: QueryList<TextDirective>;
|
||||||
constructor(@ViewQuery(TextDirective) query: QueryList<TextDirective>) {
|
constructor() { this.show = true; }
|
||||||
this.query = query;
|
|
||||||
this.show = true;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
|
@ -1015,12 +968,9 @@ class NeedsViewQueryNestedIf {
|
||||||
'<div text="4"></div>'
|
'<div text="4"></div>'
|
||||||
})
|
})
|
||||||
class NeedsViewQueryOrder {
|
class NeedsViewQueryOrder {
|
||||||
query: QueryList<TextDirective>;
|
@ViewChildren(TextDirective) query: QueryList<TextDirective>;
|
||||||
list: string[];
|
list: string[];
|
||||||
constructor(@ViewQuery(TextDirective) query: QueryList<TextDirective>) {
|
constructor() { this.list = ['2', '3']; }
|
||||||
this.query = query;
|
|
||||||
this.list = ['2', '3'];
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
|
@ -1031,24 +981,16 @@ class NeedsViewQueryOrder {
|
||||||
'<div text="4"></div></div>'
|
'<div text="4"></div></div>'
|
||||||
})
|
})
|
||||||
class NeedsViewQueryOrderWithParent {
|
class NeedsViewQueryOrderWithParent {
|
||||||
query: QueryList<TextDirective>;
|
@ViewChildren(TextDirective) query: QueryList<TextDirective>;
|
||||||
list: string[];
|
list: string[];
|
||||||
constructor(@ViewQuery(TextDirective) query: QueryList<TextDirective>) {
|
constructor() { this.list = ['2', '3']; }
|
||||||
this.query = query;
|
|
||||||
this.list = ['2', '3'];
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@Component({selector: 'needs-tpl', template: '<template><div>shadow</div></template>'})
|
@Component({selector: 'needs-tpl', template: '<template><div>shadow</div></template>'})
|
||||||
class NeedsTpl {
|
class NeedsTpl {
|
||||||
viewQuery: QueryList<TemplateRef<Object>>;
|
@ViewChildren(TemplateRef) viewQuery: QueryList<TemplateRef<Object>>;
|
||||||
query: QueryList<TemplateRef<Object>>;
|
@ContentChildren(TemplateRef) query: QueryList<TemplateRef<Object>>;
|
||||||
constructor(
|
constructor(public vc: ViewContainerRef) {}
|
||||||
@ViewQuery(TemplateRef) viewQuery: QueryList<TemplateRef<Object>>,
|
|
||||||
@Query(TemplateRef) query: QueryList<TemplateRef<Object>>, public vc: ViewContainerRef) {
|
|
||||||
this.viewQuery = viewQuery;
|
|
||||||
this.query = query;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@Component({selector: 'needs-named-tpl', template: '<template #tpl><div>shadow</div></template>'})
|
@Component({selector: 'needs-named-tpl', template: '<template #tpl><div>shadow</div></template>'})
|
||||||
|
|
|
@ -1013,9 +1013,6 @@ export declare class ProviderBuilder {
|
||||||
toValue(value: any): Provider;
|
toValue(value: any): Provider;
|
||||||
}
|
}
|
||||||
|
|
||||||
/** @deprecated */
|
|
||||||
export declare var Query: QueryMetadataFactory;
|
|
||||||
|
|
||||||
/** @stable */
|
/** @stable */
|
||||||
export declare class QueryList<T> {
|
export declare class QueryList<T> {
|
||||||
changes: Observable<any>;
|
changes: Observable<any>;
|
||||||
|
@ -1035,7 +1032,7 @@ export declare class QueryList<T> {
|
||||||
toString(): string;
|
toString(): string;
|
||||||
}
|
}
|
||||||
|
|
||||||
/** @deprecated */
|
/** @stable */
|
||||||
export declare class QueryMetadata extends DependencyMetadata {
|
export declare class QueryMetadata extends DependencyMetadata {
|
||||||
descendants: boolean;
|
descendants: boolean;
|
||||||
first: boolean;
|
first: boolean;
|
||||||
|
@ -1052,18 +1049,6 @@ export declare class QueryMetadata extends DependencyMetadata {
|
||||||
toString(): string;
|
toString(): string;
|
||||||
}
|
}
|
||||||
|
|
||||||
/** @deprecated */
|
|
||||||
export interface QueryMetadataFactory {
|
|
||||||
(selector: Type<any> | Function | string, {descendants, read}?: {
|
|
||||||
descendants?: boolean;
|
|
||||||
read?: any;
|
|
||||||
}): ParameterDecorator;
|
|
||||||
new (selector: Type<any> | Function | string, {descendants, read}?: {
|
|
||||||
descendants?: boolean;
|
|
||||||
read?: any;
|
|
||||||
}): QueryMetadata;
|
|
||||||
}
|
|
||||||
|
|
||||||
/** @stable */
|
/** @stable */
|
||||||
export declare abstract class ReflectiveInjector implements Injector {
|
export declare abstract class ReflectiveInjector implements Injector {
|
||||||
parent: Injector;
|
parent: Injector;
|
||||||
|
@ -1327,6 +1312,7 @@ export declare class ViewChildrenMetadata extends ViewQueryMetadata {
|
||||||
constructor(_selector: Type<any> | string, {read}?: {
|
constructor(_selector: Type<any> | string, {read}?: {
|
||||||
read?: any;
|
read?: any;
|
||||||
});
|
});
|
||||||
|
toString(): string;
|
||||||
}
|
}
|
||||||
|
|
||||||
/** @stable */
|
/** @stable */
|
||||||
|
@ -1387,10 +1373,7 @@ export declare class ViewMetadata {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
/** @deprecated */
|
/** @stable */
|
||||||
export declare var ViewQuery: QueryMetadataFactory;
|
|
||||||
|
|
||||||
/** @deprecated */
|
|
||||||
export declare class ViewQueryMetadata extends QueryMetadata {
|
export declare class ViewQueryMetadata extends QueryMetadata {
|
||||||
isViewQuery: boolean;
|
isViewQuery: boolean;
|
||||||
constructor(_selector: Type<any> | string, {descendants, first, read}?: {
|
constructor(_selector: Type<any> | string, {descendants, first, read}?: {
|
||||||
|
@ -1398,7 +1381,6 @@ export declare class ViewQueryMetadata extends QueryMetadata {
|
||||||
first?: boolean;
|
first?: boolean;
|
||||||
read?: any;
|
read?: any;
|
||||||
});
|
});
|
||||||
toString(): string;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/** @stable */
|
/** @stable */
|
||||||
|
|
Loading…
Reference in New Issue