动态组件加载器与延迟加载

Question

Dynamic Component Loader 和 Lazy Loading 有什么区别？我需要构建一个应用程序，该应用程序需要在应用程序的根目录下有一个 <router-outlet>。我的问题是我不知道如何实现根据数据动态呈现子组件的组件。我目前的方法建立在 Dynamic Component Loader 的基础上，但是使用这种技术我在跟踪我的位置、向后导航等方面遇到了问题。是否有使用 "multiple <router-outlets>" 的最佳实践（例如延迟加载）？

谢谢！

Answer 1

动态加载组件与延迟加载无关。

延迟加载是一种将应用程序拆分为延迟加载（在后台）而不是在开始时加载整个应用程序的模块的方法。这有助于您的应用更快地加载，因此第一页的呈现速度比不使用延迟加载时更快。

例如，您可能有一个加载各种设置的设置菜单，但您不希望用户经常访问该菜单，因此您将所有用于设置的组件放入一个模块中，然后设置该模块延迟加载（换句话说，除非用户实际访问 /settings 路由，否则需要下载该代码的 none）。

所有 angular 应用程序必须在基础组件（通常是 AppComponent）处有一个 <router-outlet>。这是所有 Angular 应用程序的要求。

您可能还想考虑使用辅助路由 - 这些是可选的，并允许您在不同的 'places' 中加载组件。你可以阅读它们 here

或者你可以（对于简单的情况）只使用 ngIf，像这样：

/app.component.html

<div *ngIf="isOption1(); else Option2">
  <my-option1-component></my-option1-component>
</div>
<ng-template #Option2>
  <my-option2-component></my-option2-component>
</ng-template>

/app.component.ts

public isOption1: boolean {
  return <some test that returns true or false>;
}

因此，根据方法 isOption1 returns 的逻辑，用户将看到 Option1 组件（当为 true 时）或 Option2 组件（当为 false 时）。

动态组件加载器与延迟加载

Dynamic Component Loader vs. Lazy Loading

lazy-loading

node.js

typescript

angular