angula的动态延迟可加载组件 -ngx-loadable-component

angula的动态延迟可加载组件 -ngx-loadable-component
插件名称 ngx-loadable-component
发布时间 2020年4月29日

动态延迟加载并代码拆分Angular组件。

安装:

# NPM
$ npm install ngx-loadable-component --save

使用:(基础)

在需要的地方添加一个可加载的组件:
app.component.html

<div class="app--emojis">
 <loadable-component [componentId]="UPSIDE_DOWN_FACE_COMPONENT_ID" [loadComponent]="loadUpsideDownFaceComponent">
  <!-- 只有当loadComponent为false时,才会显示可加载组件内容区域中的任何元素 -->
  <app-placeholder-emoji></app-placeholder-emoji>
  </loadable-component>
</div>

app.component.ts

import { LoadableComponentIds } from '../../app-loadable.manifests';

@Component({ ... })
export class AppComponent {
  // 可加载组件ID
  UPSIDE_DOWN_FACE_COMPONENT_ID: string = LoadableComponentIds.UPSIDE_DOWN_FACE;

  // 加载组件的标志
  // 将此设置为“true”将导致可加载组件
  // 加载指定的组件id
  loadUpsideDownFaceComponent: boolean = false;

}