refactor(core): add Query.read and remove DynamicComponentLoader.loadIntoLocation.

This adds the feature for `@ViewChild`/`@ViewChildren`/`@ContentChild`/`@ContentChildren` to define what to read from the queried element.

E.g. `@ViewChild(`someVar`, read: ViewContainerRef)` will locate the element with a variable `someVar` on it and return a `ViewContainerRef` for it.

Background: With this change, Angular knows exactly at which elements there will be `ViewConainerRef`s as the user has to ask explicitly of them. This simplifies codegen and will make converting Angular templates into server side templates simpler as well.

BREAKING CHANGE:
- `DynamicComponentLoader.loadIntoLocation` has been removed. Use `@ViewChild(‘myVar’, read: ViewContainerRef)` to get hold of a `ViewContainerRef` at an element with variable `myVar`.
- `DynamicComponentLoader.loadNextToLocation` now takes a `ViewContainerRef` instead of an `ElementRef`.
- `AppViewManager` is renamed into `ViewUtils` and is a mere private utility service.
This commit is contained in:
Tobias Bosch
2016-04-18 13:24:42 -07:00
parent c06b0a2371
commit efbd446d18
42 changed files with 608 additions and 717 deletions

View File

@ -1,4 +1,4 @@
import {Component, ComponentRef} from 'angular2/core';
import {Component, ComponentRef, ViewContainerRef, ViewChild} from 'angular2/core';
import {
AsyncRoute,
Route,
@ -11,7 +11,6 @@ import {
import {PromiseWrapper} from 'angular2/src/facade/async';
import {isPresent} from 'angular2/src/facade/lang';
import {DynamicComponentLoader} from 'angular2/src/core/linker/dynamic_component_loader';
import {ElementRef} from 'angular2/src/core/linker/element_ref';
@Component({selector: 'goodbye-cmp', template: `{{farewell}}`})
export class GoodbyeCmp {
@ -144,16 +143,17 @@ export class RedirectToParentCmp {
@RouteConfig([new Route({path: '/', component: HelloCmp})])
export class DynamicLoaderCmp {
private _componentRef: ComponentRef = null;
constructor(private _dynamicComponentLoader: DynamicComponentLoader,
private _elementRef: ElementRef) {}
@ViewChild('viewport', {read: ViewContainerRef}) private _viewport: ViewContainerRef;
constructor(private _dynamicComponentLoader: DynamicComponentLoader) {}
onSomeAction(): Promise<any> {
if (isPresent(this._componentRef)) {
this._componentRef.destroy();
this._componentRef = null;
}
return this._dynamicComponentLoader.loadIntoLocation(DynamicallyLoadedComponent,
this._elementRef, 'viewport')
return this._dynamicComponentLoader.loadNextToLocation(DynamicallyLoadedComponent,
this._viewport)
.then((cmp) => { this._componentRef = cmp; });
}
}