angular2
Version:
Angular 2 - a web framework for modern web apps
461 lines (460 loc) • 13.8 kB
JavaScript
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
import { CONST, stringify, isString } from 'angular2/src/facade/lang';
import { resolveForwardRef } from 'angular2/src/core/di';
import { DependencyMetadata } from 'angular2/src/core/di/metadata';
/**
* Specifies that a constant attribute value should be injected.
*
* The directive can inject constant string literals of host element attributes.
*
* ### Example
*
* Suppose we have an `<input>` element and want to know its `type`.
*
* ```html
* <input type="text">
* ```
*
* A decorator can inject string literal `text` like so:
*
* {@example core/ts/metadata/metadata.ts region='attributeMetadata'}
*/
export let AttributeMetadata = class AttributeMetadata extends DependencyMetadata {
constructor(attributeName) {
super();
this.attributeName = attributeName;
}
get token() {
// Normally one would default a token to a type of an injected value but here
// the type of a variable is "string" and we can't use primitive type as a return value
// so we use instance of Attribute instead. This doesn't matter much in practice as arguments
// with @Attribute annotation are injected by ElementInjector that doesn't take tokens into
// account.
return this;
}
toString() { return `@Attribute(${stringify(this.attributeName)})`; }
};
AttributeMetadata = __decorate([
CONST(),
__metadata('design:paramtypes', [String])
], AttributeMetadata);
/**
* 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 #find-me>...</div>
* <div #find-me-too>...</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.
*/
export let QueryMetadata = class QueryMetadata extends DependencyMetadata {
constructor(_selector, { descendants = false, first = false, read = null } = {}) {
super();
this._selector = _selector;
this.descendants = descendants;
this.first = first;
this.read = read;
}
/**
* always `false` to differentiate it with {@link ViewQueryMetadata}.
*/
get isViewQuery() { return false; }
/**
* what this is querying for.
*/
get selector() { return resolveForwardRef(this._selector); }
/**
* whether this is querying for a variable binding or a directive.
*/
get isVarBindingQuery() { return isString(this.selector); }
/**
* returns a list of variable bindings this is querying for.
* Only applicable if this is a variable bindings query.
*/
get varBindings() { return this.selector.split(','); }
toString() { return `@Query(${stringify(this.selector)})`; }
};
QueryMetadata = __decorate([
CONST(),
__metadata('design:paramtypes', [Object, Object])
], QueryMetadata);
// TODO: add an example after ContentChildren and ViewChildren are in master
/**
* Configures a content query.
*
* Content queries are set before the `ngAfterContentInit` callback is called.
*
* ### Example
*
* ```
* @Directive({
* selector: 'someDir'
* })
* class SomeDir {
* @ContentChildren(ChildDirective) contentChildren: QueryList<ChildDirective>;
*
* ngAfterContentInit() {
* // contentChildren is set
* }
* }
* ```
*/
export let ContentChildrenMetadata = class ContentChildrenMetadata extends QueryMetadata {
constructor(_selector, { descendants = false, read = null } = {}) {
super(_selector, { descendants: descendants, read: read });
}
};
ContentChildrenMetadata = __decorate([
CONST(),
__metadata('design:paramtypes', [Object, Object])
], ContentChildrenMetadata);
// TODO: add an example after ContentChild and ViewChild are in master
/**
* Configures a content query.
*
* Content queries are set before the `ngAfterContentInit` callback is called.
*
* ### Example
*
* ```
* @Directive({
* selector: 'someDir'
* })
* class SomeDir {
* @ContentChild(ChildDirective) contentChild;
*
* ngAfterContentInit() {
* // contentChild is set
* }
* }
* ```
*/
export let ContentChildMetadata = class ContentChildMetadata extends QueryMetadata {
constructor(_selector, { read = null } = {}) {
super(_selector, { descendants: true, first: true, read: read });
}
};
ContentChildMetadata = __decorate([
CONST(),
__metadata('design:paramtypes', [Object, Object])
], ContentChildMetadata);
/**
* 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 @ViewQuery(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.
*/
export let ViewQueryMetadata = class ViewQueryMetadata extends QueryMetadata {
constructor(_selector, { descendants = false, first = false, read = null } = {}) {
super(_selector, { descendants: descendants, first: first, read: read });
}
/**
* always `true` to differentiate it with {@link QueryMetadata}.
*/
get isViewQuery() { return true; }
toString() { return `@ViewQuery(${stringify(this.selector)})`; }
};
ViewQueryMetadata = __decorate([
CONST(),
__metadata('design:paramtypes', [Object, Object])
], ViewQueryMetadata);
/**
* Declares a list of child element references.
*
* Angular automatically updates the list when the DOM is updated.
*
* `ViewChildren` takes an argument to select elements.
*
* - If the argument is a type, directives or components with the type will be bound.
*
* - If the argument is a string, the string is interpreted as a list of comma-separated selectors.
* For each selector, an element containing the matching template variable (e.g. `#child`) will be
* bound.
*
* View children are set before the `ngAfterViewInit` callback is called.
*
* ### Example
*
* With type selector:
*
* ```
* @Component({
* selector: 'child-cmp',
* template: '<p>child</p>'
* })
* class ChildCmp {
* doSomething() {}
* }
*
* @Component({
* selector: 'some-cmp',
* template: `
* <child-cmp></child-cmp>
* <child-cmp></child-cmp>
* <child-cmp></child-cmp>
* `,
* directives: [ChildCmp]
* })
* class SomeCmp {
* @ViewChildren(ChildCmp) children:QueryList<ChildCmp>;
*
* ngAfterViewInit() {
* // children are set
* this.children.toArray().forEach((child)=>child.doSomething());
* }
* }
* ```
*
* With string selector:
*
* ```
* @Component({
* selector: 'child-cmp',
* template: '<p>child</p>'
* })
* class ChildCmp {
* doSomething() {}
* }
*
* @Component({
* selector: 'some-cmp',
* template: `
* <child-cmp #child1></child-cmp>
* <child-cmp #child2></child-cmp>
* <child-cmp #child3></child-cmp>
* `,
* directives: [ChildCmp]
* })
* class SomeCmp {
* @ViewChildren('child1,child2,child3') children:QueryList<ChildCmp>;
*
* ngAfterViewInit() {
* // children are set
* this.children.toArray().forEach((child)=>child.doSomething());
* }
* }
* ```
*/
export let ViewChildrenMetadata = class ViewChildrenMetadata extends ViewQueryMetadata {
constructor(_selector, { read = null } = {}) {
super(_selector, { descendants: true, read: read });
}
};
ViewChildrenMetadata = __decorate([
CONST(),
__metadata('design:paramtypes', [Object, Object])
], ViewChildrenMetadata);
/**
*
* Declares a reference of child element.
*
* `ViewChildren` takes an argument to select elements.
*
* - If the argument is a type, a directive or a component with the type will be bound.
*
If the argument is a string, the string is interpreted as a selector. An element containing the
matching template variable (e.g. `#child`) will be bound.
*
* In either case, `@ViewChild()` assigns the first (looking from above) element if there are
multiple matches.
*
* View child is set before the `ngAfterViewInit` callback is called.
*
* ### Example
*
* With type selector:
*
* ```
* @Component({
* selector: 'child-cmp',
* template: '<p>child</p>'
* })
* class ChildCmp {
* doSomething() {}
* }
*
* @Component({
* selector: 'some-cmp',
* template: '<child-cmp></child-cmp>',
* directives: [ChildCmp]
* })
* class SomeCmp {
* @ViewChild(ChildCmp) child:ChildCmp;
*
* ngAfterViewInit() {
* // child is set
* this.child.doSomething();
* }
* }
* ```
*
* With string selector:
*
* ```
* @Component({
* selector: 'child-cmp',
* template: '<p>child</p>'
* })
* class ChildCmp {
* doSomething() {}
* }
*
* @Component({
* selector: 'some-cmp',
* template: '<child-cmp #child></child-cmp>',
* directives: [ChildCmp]
* })
* class SomeCmp {
* @ViewChild('child') child:ChildCmp;
*
* ngAfterViewInit() {
* // child is set
* this.child.doSomething();
* }
* }
* ```
*/
export let ViewChildMetadata = class ViewChildMetadata extends ViewQueryMetadata {
constructor(_selector, { read = null } = {}) {
super(_selector, { descendants: true, first: true, read: read });
}
};
ViewChildMetadata = __decorate([
CONST(),
__metadata('design:paramtypes', [Object, Object])
], ViewChildMetadata);