feat(core): expose inputs, outputs and ngContentSelectors on ComponentFactory.

E.g. for a component like this:
```
@Component({
  template: ‘<ng-content select=“child”></ng-content>’
})
class MyComp {
  @Input(‘aInputName’)
  aInputProp: string;

  @Output(‘aEventName’)
  aOuputProp: EventEmitter<any>;
}
```

the `ComponentFactory` will now contain the following:
- `inputs = {aInputProp: ‘aInputName’}`
- `outputs = {aOutputProp: ‘aOutputName’}`
- `ngContentSelectors = [‘child’]`
This commit is contained in:
Tobias Bosch
2017-03-14 14:54:36 -07:00
committed by Chuck Jazdzewski
parent 8e2c8b3e4d
commit 1171f91a80
9 changed files with 134 additions and 11 deletions

View File

@ -73,6 +73,8 @@ export class Compiler {
* the template of the given component.
* This is used by the `upgrade` library to compile the appropriate transclude content
* in the AngularJS wrapper component.
*
* @deprecated since v4. Use ComponentFactory.ngContentSelectors instead.
*/
getNgContentSelectors(component: Type<any>): string[] { throw _throwError(); }

View File

@ -70,6 +70,18 @@ export abstract class ComponentRef<C> {
export abstract class ComponentFactory<C> {
abstract get selector(): string;
abstract get componentType(): Type<any>;
/**
* selector for all <ng-content> elements in the component.
*/
abstract get ngContentSelectors(): string[];
/**
* the inputs of the component.
*/
abstract get inputs(): {propName: string, templateName: string}[];
/**
* the outputs of the component.
*/
abstract get outputs(): {propName: string, templateName: string}[];
/**
* Creates a new component.
*/

View File

@ -65,6 +65,9 @@ export class ComponentFactoryBoundToModule<C> extends ComponentFactory<C> {
get selector() { return this.factory.selector; }
get componentType() { return this.factory.componentType; }
get ngContentSelectors() { return this.factory.ngContentSelectors; }
get inputs() { return this.factory.inputs; }
get outputs() { return this.factory.outputs; }
create(
injector: Injector, projectableNodes?: any[][], rootSelectorOrNode?: string|any,

View File

@ -26,9 +26,21 @@ import {attachEmbeddedView, detachEmbeddedView, moveEmbeddedView, renderDetachVi
const EMPTY_CONTEXT = new Object();
export function createComponentFactory(
selector: string, componentType: Type<any>,
viewDefFactory: ViewDefinitionFactory): ComponentFactory<any> {
return new ComponentFactory_(selector, componentType, viewDefFactory);
selector: string, componentType: Type<any>, viewDefFactory: ViewDefinitionFactory,
inputs: {[propName: string]: string}, outputs: {[propName: string]: string},
ngContentSelectors: string[]): ComponentFactory<any> {
const inputsArr: {propName: string, templateName: string}[] = [];
for (let propName in inputs) {
const templateName = inputs[propName];
inputsArr.push({propName, templateName});
}
const outputsArr: {propName: string, templateName: string}[] = [];
for (let propName in outputs) {
const templateName = outputs[propName];
outputsArr.push({propName, templateName});
}
return new ComponentFactory_(
selector, componentType, viewDefFactory, inputsArr, outputsArr, ngContentSelectors);
}
export function getComponentViewDefinitionFactory(componentFactory: ComponentFactory<any>):
@ -44,7 +56,10 @@ class ComponentFactory_ extends ComponentFactory<any> {
constructor(
public selector: string, public componentType: Type<any>,
viewDefFactory: ViewDefinitionFactory) {
viewDefFactory: ViewDefinitionFactory,
public inputs: {propName: string, templateName: string}[],
public outputs: {propName: string, templateName: string}[],
public ngContentSelectors: string[]) {
super();
this.viewDefFactory = viewDefFactory;
}