cargdev/angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(core): allow to query content of templates that are stamped out at a different place

Browse Source 
Previously, if a `TemplateRef` was created in a `ViewContainerRef`
at a different place, the content was not query able at all.

With this change, the content of the template can be queried
as if it was stamped out at the declaration place of the template.

E.g. in the following example, the `QueryList<ChildCmp>` will
be filled once the button is clicked.

```
@Component({
  selector: ‘my-comp’,
  template: ‘<button #vc (click)=“createView()”></button>’
})
class MyComp {
  @ContentChildren(ChildCmp)
  children: QueryList<ChildCmp>;

  @ContentChildren(TemplateRef)
  template: TemplateRef;

  @ViewChild(‘vc’, {read: ViewContainerRef})
  vc: ViewContainerRef;

  createView() {
    this.vc.createEmbeddedView(this.template);
  }
}

@Component({
  template: `
<my-comp>
  <template><child-cmp></child-cmp></template>
</my-comp>
`
})
class App {}
```

Closes #12283
Closes #12094
This commit is contained in:
Tobias Bosch
2016-11-03 15:32:44 -07:00
committed by vikerman
parent 80d36b8db4
commit f2bbef3e33
5 changed files with 110 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
modules/@angular/compiler/src/view_compiler/compile_element.ts
View File

@ -73,7 +73,7 @@ export class CompileElement extends CompileNode {
o.THIS_EXPR.callMethod('injector', [o.literal(this.nodeIndex)]));
this.instances.set(
resolveIdentifierToken(Identifiers.Renderer).reference, o.THIS_EXPR.prop('renderer'));
if (this.hasViewContainer) {
if (this.hasViewContainer || this.hasEmbeddedView) {
this._createViewContainer();
}
if (this.component) {

14
modules/@angular/compiler/src/view_compiler/view_builder.ts
View File

@ -459,6 +459,11 @@ function createViewClass(
if (view.genConfig.genDebugInfo) {
superConstructorArgs.push(nodeDebugInfosVar);
}
if (view.viewType === ViewType.EMBEDDED) {
viewConstructorArgs.push(new o.FnParam(
'declaredViewContainer', o.importType(resolveIdentifier(Identifiers.ViewContainer))));
superConstructorArgs.push(o.variable('declaredViewContainer'));
}
var viewMethods = [
new o.ClassMethod(
'createInternal', [new o.FnParam(rootSelectorVar.name, o.STRING_TYPE)],
@ -676,7 +681,7 @@ function generateVisitNodesStmts(
return stmts;
}
function generateCreateEmbeddedViewsMethod(view: CompileView) {
function generateCreateEmbeddedViewsMethod(view: CompileView): o.ClassMethod {
const nodeIndexVar = o.variable('nodeIndex');
const stmts: o.Statement[] = [];
view.nodes.forEach((node) => {
@ -686,12 +691,15 @@ function generateCreateEmbeddedViewsMethod(view: CompileView) {
stmts.push(new o.IfStmt(
nodeIndexVar.equals(o.literal(node.nodeIndex)),
[new o.ReturnStatement(node.embeddedView.classExpr.instantiate([
ViewProperties.viewUtils, o.THIS_EXPR, o.literal(node.nodeIndex), node.renderNode
ViewProperties.viewUtils, o.THIS_EXPR, o.literal(node.nodeIndex), node.renderNode,
node.viewContainer
]))]));
}
}
});
stmts.push(new o.ReturnStatement(o.NULL_EXPR));
if (stmts.length > 0) {
stmts.push(new o.ReturnStatement(o.NULL_EXPR));
}
return new o.ClassMethod(
'createEmbeddedViewInternal', [new o.FnParam(nodeIndexVar.name, o.NUMBER_TYPE)], stmts,
o.importType(resolveIdentifier(Identifiers.AppView), [o.DYNAMIC_TYPE]));