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

feat(NgComponentOutlet): add NgModule support to NgComponentOutlet directive (#14088)

Browse Source 
Allow NgComponentOutlet to dynamically load a module, then load a component from
that module. Useful for lazy loading code, then add the lazy loaded code to the
page using NgComponentOutlet.

Closes #14043
This commit is contained in:
Jason Aden
2017-01-25 17:41:08 -08:00
committed by Victor Berchet
parent 4106d18172
commit 3ef73c2b19
5 changed files with 196 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
modules/@angular/common/src/directives/ng_component_outlet.ts
View File

@ -6,7 +6,8 @@
* found in the LICENSE file at https://angular.io/license
*/
import {ComponentFactoryResolver, ComponentRef, Directive, Injector, Input, OnChanges, Provider, SimpleChanges, Type, ViewContainerRef} from '@angular/core';
import {ComponentFactoryResolver, ComponentRef, Directive, Injector, Input, NgModuleFactory, NgModuleRef, OnChanges, OnDestroy, Provider, SimpleChanges, Type, ViewContainerRef} from '@angular/core';
/**
@ -20,16 +21,17 @@ import {ComponentFactoryResolver, ComponentRef, Directive, Injector, Input, OnCh
*
* You can control the component creation process by using the following optional attributes:
*
* * `ngOutletInjector`: Optional custom {@link Injector} that will be used as parent for the
* Component.
* Defaults to the injector of the current view container.
* * `ngComponentOutletInjector`: Optional custom {@link Injector} that will be used as parent for
* the Component. Defaults to the injector of the current view container.
*
* * `ngOutletProviders`: Optional injectable objects ({@link Provider}) that are visible to the
* component.
* * `ngComponentOutletProviders`: Optional injectable objects ({@link Provider}) that are visible
* to the component.
*
* * `ngOutletContent`: Optional list of projectable nodes to insert into the content
* section of the component, if exists. ({@link NgContent}).
* * `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
*
@ -38,14 +40,20 @@ import {ComponentFactoryResolver, ComponentRef, Directive, Injector, Input, OnCh
* <ng-container *ngComponentOutlet="componentTypeExpression"></ng-container>
* ```
*
* Customized
* Customized injector/content
* ```
* <ng-container *ngComponentOutlet="componentTypeExpression;
* injector: injectorExpression;
* content: contentNodesExpression">
* content: contentNodesExpression;">
* </ng-container>
* ```
*
* Customized ngModuleFactory
* ```
* <ng-container *ngComponentOutlet="componentTypeExpression;
* ngModuleFactory: moduleFactory;">
* </ng-container>
* ```
* # Example
*
* {@example common/ngComponentOutlet/ts/module.ts region='SimpleExample'}
@ -53,34 +61,55 @@ import {ComponentFactoryResolver, ComponentRef, Directive, Injector, Input, OnCh
* 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 {
export class NgComponentOutlet implements OnChanges, OnDestroy {
@Input() ngComponentOutlet: Type<any>;
@Input() ngComponentOutletInjector: Injector;
@Input() ngComponentOutletContent: any[][];
@Input() ngComponentOutletNgModuleFactory: NgModuleFactory<any>;
componentRef: ComponentRef<any>;
private _componentRef: ComponentRef<any> = null;
private _moduleRef: NgModuleRef<any> = null;
constructor(
private _cmpFactoryResolver: ComponentFactoryResolver,
private _viewContainerRef: ViewContainerRef) {}
constructor(private _viewContainerRef: ViewContainerRef) {}
ngOnChanges(changes: SimpleChanges) {
if (this.componentRef) {
this._viewContainerRef.remove(this._viewContainerRef.indexOf(this.componentRef.hostView));
if (this._componentRef) {
this._viewContainerRef.remove(this._viewContainerRef.indexOf(this._componentRef.hostView));
}
this._viewContainerRef.clear();
this.componentRef = null;
this._componentRef = null;
if (this.ngComponentOutlet) {
let injector = this.ngComponentOutletInjector || this._viewContainerRef.parentInjector;
this.componentRef = this._viewContainerRef.createComponent(
this._cmpFactoryResolver.resolveComponentFactory(this.ngComponentOutlet),
this._viewContainerRef.length, injector, this.ngComponentOutletContent);
if ((changes as any).ngComponentOutletNgModuleFactory) {
if (this._moduleRef) this._moduleRef.destroy();
if (this.ngComponentOutletNgModuleFactory) {
this._moduleRef = this.ngComponentOutletNgModuleFactory.create(injector);
} else {
this._moduleRef = null;
}
}
if (this._moduleRef) {
injector = this._moduleRef.injector;
}
let componentFactory =
injector.get(ComponentFactoryResolver).resolveComponentFactory(this.ngComponentOutlet);
this._componentRef = this._viewContainerRef.createComponent(
componentFactory, this._viewContainerRef.length, injector, this.ngComponentOutletContent);
}
}
ngOnDestroy() {
if (this._moduleRef) this._moduleRef.destroy();
}
}