fcadbf4bf6
This change allows ReflectiveInjector to be tree shaken resulting
in not needed Reflect polyfil and smaller bundles.
Code savings for HelloWorld using Closure:
Reflective: bundle.js: 105,864(34,190 gzip)
Static: bundle.js: 154,889(33,555 gzip)
645( 2%)
BREAKING CHANGE:
`platformXXXX()` no longer accepts providers which depend on reflection.
Specifically the method signature when from `Provider[]` to
`StaticProvider[]`.
Example:
Before:
```
[
MyClass,
{provide: ClassA, useClass: SubClassA}
]
```
After:
```
[
{provide: MyClass, deps: [Dep1,...]},
{provide: ClassA, useClass: SubClassA, deps: [Dep1,...]}
]
```
NOTE: This only applies to platform creation and providers for the JIT
compiler. It does not apply to `@Compotent` or `@NgModule` provides
declarations.
Benchpress note: Previously Benchpress also supported reflective
provides, which now require static providers.
DEPRECATION:
- `ReflectiveInjector` is now deprecated as it will be remove. Use
`Injector.create` as a replacement.
closes #18496
113 lines
3.9 KiB
TypeScript
113 lines
3.9 KiB
TypeScript
/**
|
|
* @license
|
|
* Copyright Google Inc. All Rights Reserved.
|
|
*
|
|
* Use of this source code is governed by an MIT-style license that can be
|
|
* found in the LICENSE file at https://angular.io/license
|
|
*/
|
|
|
|
import {ComponentFactoryResolver, ComponentRef, Directive, Injector, Input, NgModuleFactory, NgModuleRef, OnChanges, OnDestroy, SimpleChanges, StaticProvider, Type, ViewContainerRef} from '@angular/core';
|
|
|
|
|
|
/**
|
|
* Instantiates a single {@link Component} type and inserts its Host View into current View.
|
|
* `NgComponentOutlet` provides a declarative approach for dynamic component creation.
|
|
*
|
|
* `NgComponentOutlet` requires a component type, if a falsy value is set the view will clear and
|
|
* any existing component will get destroyed.
|
|
*
|
|
* ### Fine tune control
|
|
*
|
|
* You can control the component creation process by using the following optional attributes:
|
|
*
|
|
* * `ngComponentOutletInjector`: Optional custom {@link Injector} that will be used as parent for
|
|
* the Component. Defaults to the injector of the current view container.
|
|
*
|
|
* * `ngComponentOutletContent`: Optional list of projectable nodes to insert into the content
|
|
* section of the component, if exists.
|
|
*
|
|
* * `ngComponentOutletNgModuleFactory`: Optional module factory to allow dynamically loading other
|
|
* module, then load a component from that module.
|
|
*
|
|
* ### Syntax
|
|
*
|
|
* Simple
|
|
* ```
|
|
* <ng-container *ngComponentOutlet="componentTypeExpression"></ng-container>
|
|
* ```
|
|
*
|
|
* Customized injector/content
|
|
* ```
|
|
* <ng-container *ngComponentOutlet="componentTypeExpression;
|
|
* injector: injectorExpression;
|
|
* content: contentNodesExpression;">
|
|
* </ng-container>
|
|
* ```
|
|
*
|
|
* Customized ngModuleFactory
|
|
* ```
|
|
* <ng-container *ngComponentOutlet="componentTypeExpression;
|
|
* ngModuleFactory: moduleFactory;">
|
|
* </ng-container>
|
|
* ```
|
|
* ## Example
|
|
*
|
|
* {@example common/ngComponentOutlet/ts/module.ts region='SimpleExample'}
|
|
*
|
|
* A more complete example with additional options:
|
|
*
|
|
* {@example common/ngComponentOutlet/ts/module.ts region='CompleteExample'}
|
|
|
|
* A more complete example with ngModuleFactory:
|
|
*
|
|
* {@example common/ngComponentOutlet/ts/module.ts region='NgModuleFactoryExample'}
|
|
*
|
|
* @experimental
|
|
*/
|
|
@Directive({selector: '[ngComponentOutlet]'})
|
|
export class NgComponentOutlet implements OnChanges, OnDestroy {
|
|
@Input() ngComponentOutlet: Type<any>;
|
|
@Input() ngComponentOutletInjector: Injector;
|
|
@Input() ngComponentOutletContent: any[][];
|
|
@Input() ngComponentOutletNgModuleFactory: NgModuleFactory<any>;
|
|
|
|
private _componentRef: ComponentRef<any>|null = null;
|
|
private _moduleRef: NgModuleRef<any>|null = null;
|
|
|
|
constructor(private _viewContainerRef: ViewContainerRef) {}
|
|
|
|
ngOnChanges(changes: SimpleChanges) {
|
|
this._viewContainerRef.clear();
|
|
this._componentRef = null;
|
|
|
|
if (this.ngComponentOutlet) {
|
|
const elInjector = this.ngComponentOutletInjector || this._viewContainerRef.parentInjector;
|
|
|
|
if (changes['ngComponentOutletNgModuleFactory']) {
|
|
if (this._moduleRef) this._moduleRef.destroy();
|
|
|
|
if (this.ngComponentOutletNgModuleFactory) {
|
|
const parentModule = elInjector.get(NgModuleRef);
|
|
this._moduleRef = this.ngComponentOutletNgModuleFactory.create(parentModule.injector);
|
|
} else {
|
|
this._moduleRef = null;
|
|
}
|
|
}
|
|
|
|
const componentFactoryResolver = this._moduleRef ? this._moduleRef.componentFactoryResolver :
|
|
elInjector.get(ComponentFactoryResolver);
|
|
|
|
const componentFactory =
|
|
componentFactoryResolver.resolveComponentFactory(this.ngComponentOutlet);
|
|
|
|
this._componentRef = this._viewContainerRef.createComponent(
|
|
componentFactory, this._viewContainerRef.length, elInjector,
|
|
this.ngComponentOutletContent);
|
|
}
|
|
}
|
|
|
|
ngOnDestroy() {
|
|
if (this._moduleRef) this._moduleRef.destroy();
|
|
}
|
|
}
|