Advertisement
Guest User

Untitled

a guest
Jun 20th, 2019
135
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.24 KB | None | 0 0
  1. import { Component, ɵrenderComponent, Injector, ɵɵdirectiveInject, INJECTOR } from '@angular/core';
  2.  
  3. @LazyComponent({
  4. path: './feature/feature/feature.component',
  5. component: 'FeatureComponent',
  6. host: 'my-container'
  7. })
  8. @Component({
  9. selector: 'app-root',
  10. templateUrl: './app.component.html',
  11. styleUrls: ['./app.component.scss']
  12. })
  13. export class AppComponent {
  14. constructor(private injector: Injector) { }
  15. loadFeature() {
  16. import('./feature/feature/feature.component')
  17. .then(({ FeatureComponent }) => {
  18. ɵrenderComponent(FeatureComponent, { host: 'my-container', injector: this.injector });
  19. });
  20. }
  21.  
  22. afterViewLoad() {
  23. console.log('Lazy HOC loaded!');
  24. }
  25. }
  26.  
  27.  
  28. export function LazyComponent(config: { path: string, component: string, host: string }) {
  29. return (cmpType) => {
  30. const originalFactory = cmpType.ngComponentDef.factory;
  31. cmpType.ngComponentDef.factory = (...args) => {
  32. const cmp = originalFactory(...args);
  33.  
  34. const injector = ɵɵdirectiveInject(INJECTOR);
  35.  
  36. import(`${config.path}`).then(m =>
  37. ɵrenderComponent(m[config.component], { host: config.host, injector }));
  38.  
  39. if (cmp.afterViewLoad) {
  40. cmp.afterViewLoad();
  41. }
  42. return cmp;
  43. };
  44. return cmpType;
  45. };
  46. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement