diff --git a/modules/@angular/core/src/metadata/di.ts b/modules/@angular/core/src/metadata/di.ts
index d22733e163..c1638a8888 100644
--- a/modules/@angular/core/src/metadata/di.ts
+++ b/modules/@angular/core/src/metadata/di.ts
@@ -1,4 +1,4 @@
-import {stringify, isString, Type} from '../../src/facade/lang';
+import {stringify, isString, Type, StringWrapper} from '../../src/facade/lang';
import {DependencyMetadata} from '../di/metadata';
import {resolveForwardRef} from '../di/forward_ref';
@@ -184,7 +184,7 @@ export class QueryMetadata extends DependencyMetadata {
* returns a list of variable bindings this is querying for.
* Only applicable if this is a variable bindings query.
*/
- get varBindings(): string[] { return this.selector.split(','); }
+ get varBindings(): string[] { return StringWrapper.split(this.selector, /\s*,\s*/g); }
toString(): string { return `@Query(${stringify(this.selector)})`; }
}
diff --git a/modules/@angular/core/test/metadata/di_spec.ts b/modules/@angular/core/test/metadata/di_spec.ts
new file mode 100644
index 0000000000..7c45f36723
--- /dev/null
+++ b/modules/@angular/core/test/metadata/di_spec.ts
@@ -0,0 +1,107 @@
+import {
+ AsyncTestCompleter,
+ beforeEach,
+ ddescribe,
+ describe,
+ expect,
+ iit,
+ inject,
+ it,
+ xit,
+} from '@angular/core/testing/testing_internal';
+import { TestComponentBuilder } from '@angular/compiler/testing';
+
+import {
+ Component,
+ ViewMetadata,
+ Input,
+ Directive,
+ ViewChild,
+ ViewChildren,
+ QueryList,
+ ElementRef
+} from '@angular/core';
+
+export function main() {
+ describe('ViewChild', () => {
+ it('should support type selector',
+ inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
+ tcb.overrideView(ViewChildTypeSelectorComponent,
+ new ViewMetadata(
+ {template: ``, directives: [Simple]}))
+ .createAsync(ViewChildTypeSelectorComponent)
+ .then((view) => {
+ view.detectChanges();
+ expect(view.componentInstance.child).toBeDefined();
+ expect(view.componentInstance.child.marker).toBe("1");
+ async.done();
+ });
+ }));
+ it('should support string selector',
+ inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
+ tcb.overrideView(
+ ViewChildStringSelectorComponent,
+ new ViewMetadata({template: ``, directives: [Simple]}))
+ .createAsync(ViewChildStringSelectorComponent)
+ .then((view) => {
+ view.detectChanges();
+ expect(view.componentInstance.child).toBeDefined();
+ async.done();
+ });
+ }));
+ });
+ describe('ViewChildren', () => {
+ it('should support type selector',
+ inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
+ tcb.overrideView(ViewChildrenTypeSelectorComponent,
+ new ViewMetadata({template: ``, directives: [Simple]}))
+ .createAsync(ViewChildrenTypeSelectorComponent)
+ .then((view) => {
+ view.detectChanges();
+ expect(view.componentInstance.children).toBeDefined();
+ expect(view.componentInstance.children.length).toBe(2);
+ async.done();
+ });
+ }));
+ it('should support string selector',
+ inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
+ tcb.overrideView(
+ ViewChildrenStringSelectorComponent,
+ new ViewMetadata({template: ``, directives: [Simple]}))
+ .createAsync(ViewChildrenStringSelectorComponent)
+ .then((view) => {
+ view.detectChanges();
+ expect(view.componentInstance.children).toBeDefined();
+ expect(view.componentInstance.children.length).toBe(2);
+ async.done();
+ });
+ }));
+ });
+}
+
+
+@Directive({selector: "simple"})
+class Simple {
+ @Input() marker: string;
+}
+
+@Component({selector: 'view-child-type-selector'})
+class ViewChildTypeSelectorComponent {
+ @ViewChild(Simple) child: Simple;
+}
+
+@Component({selector: 'view-child-string-selector'})
+class ViewChildStringSelectorComponent {
+ @ViewChild("child") child: ElementRef;
+}
+
+@Component({selector: 'view-children-type-selector'})
+class ViewChildrenTypeSelectorComponent {
+ @ViewChildren(Simple) children: QueryList;
+}
+
+@Component({selector: 'view-child-string-selector'})
+class ViewChildrenStringSelectorComponent {
+ // Allow comma separated selector (with spaces).
+ @ViewChildren("child1 , child2") children: QueryList;
+}