fix(query): set fixed @ViewChild / @ContentChild right after the view is created

This is needed to have a true replacement of the previous
`DynamicComponentLoader.loadNextToLocation`, so that components
can be loaded into the view before change detection runs.

Author: tbosch

modules/angular2/src/compiler/view_compiler/compile_element.ts

@@ -230,7 +230,8 @@ export class CompileElement extends CompileNode {
 
     this._queries.values().forEach(
         (queries) =>
-            queries.forEach((query) => query.afterChildren(this.view.updateContentQueriesMethod)));
+            queries.forEach((query) => query.afterChildren(this.view.createMethod,
+                                                           this.view.updateContentQueriesMethod)));
   }
 
   addContentNode(ngContentIndex: number, nodeExpr: o.Expression) {

modules/angular2/src/compiler/view_compiler/compile_query.ts

@@ -59,7 +59,18 @@ export class CompileQuery {
     }
   }
 
-  afterChildren(targetMethod: CompileMethod) {
+  private _isStatic(): boolean {
+    var isStatic = true;
+    this._values.values.forEach((value) => {
+      if (value instanceof ViewQueryValues) {
+        // querying a nested view makes the query content dynamic
+        isStatic = false;
+      }
+    });
+    return isStatic;
+  }
+
+  afterChildren(targetStaticMethod, targetDynamicMethod: CompileMethod) {
     var values = createQueryValues(this._values);
     var updateStmts = [this.queryList.callMethod('reset', [o.literalArr(values)]).toStmt()];
     if (isPresent(this.ownerDirectiveExpression)) {
@@ -70,7 +81,15 @@ export class CompileQuery {
     if (!this.meta.first) {
       updateStmts.push(this.queryList.callMethod('notifyOnChanges', []).toStmt());
     }
-    targetMethod.addStmt(new o.IfStmt(this.queryList.prop('dirty'), updateStmts));
+    if (this.meta.first && this._isStatic()) {
+      // for queries that don't change and the user asked for a single element,
+      // set it immediately. That is e.g. needed for querying for ViewContainerRefs, ...
+      // we don't do this for QueryLists for now as this would break the timing when
+      // we call QueryList listeners...
+      targetStaticMethod.addStmts(updateStmts);
+    } else {
+      targetDynamicMethod.addStmt(new o.IfStmt(this.queryList.prop('dirty'), updateStmts));
+    }
   }
 }
 

modules/angular2/src/compiler/view_compiler/compile_view.ts

@@ -189,7 +189,8 @@ export class CompileView implements NameResolver {
 
   afterNodes() {
     this.viewQueries.values().forEach(
-        (queries) => queries.forEach((query) => query.afterChildren(this.updateViewQueriesMethod)));
+        (queries) => queries.forEach(
+            (query) => query.afterChildren(this.createMethod, this.updateViewQueriesMethod)));
   }
 }
 

modules/angular2/test/core/linker/query_integration_spec.ts

@@ -136,6 +136,28 @@ export function main() {
                });
          }));
 
+      it('should set static view and content children already after the constructor call',
+         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
+           var template =
+               '<needs-static-content-view-child #q><div text="contentFoo"></div></needs-static-content-view-child>';
+
+           tcb.overrideTemplate(MyComp, template)
+               .createAsync(MyComp)
+               .then((view) => {
+                 var q: NeedsStaticContentAndViewChild =
+                     view.debugElement.children[0].getLocal('q');
+                 expect(q.contentChild.text).toBeFalsy();
+                 expect(q.viewChild.text).toBeFalsy();
+
+                 view.detectChanges();
+
+                 expect(q.contentChild.text).toEqual('contentFoo');
+                 expect(q.viewChild.text).toEqual('viewFoo');
+
+                 async.done();
+               });
+         }));
+
       it('should contain the first view child accross embedded views',
          inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
            var template = '<needs-view-child #q></needs-view-child>';
@@ -850,6 +872,19 @@ class NeedsViewChild implements AfterViewInit,
   ngAfterViewChecked() { this.log.push(["check", isPresent(this.child) ? this.child.text : null]); }
 }
 
+@Component({
+  selector: 'needs-static-content-view-child',
+  template: `
+    <div text="viewFoo"></div>
+  `,
+  directives: [TextDirective]
+})
+class NeedsStaticContentAndViewChild {
+  @ContentChild(TextDirective) contentChild: TextDirective;
+
+  @ViewChild(TextDirective) viewChild: TextDirective;
+}
+
 @Directive({selector: '[dir]'})
 @Injectable()
 class InertDirective {
@@ -1074,6 +1109,7 @@ class NeedsViewContainerWithRead {
     NeedsContentChildren,
     NeedsViewChildren,
     NeedsViewChild,
+    NeedsStaticContentAndViewChild,
     NeedsContentChild,
     NeedsTpl,
     TextDirective,