Question

Dynamic Component Loader和Lazy Loading之间有什么区别？我需要在应用程序的根目录下构建一个需要<router-outlet>的应用程序。我的问题是我不知道如何实现一个动态地根据数据呈现子组件的组件。我当前的方法建立在Dynamic Component Loader上，但是使用这种技术我遇到了跟踪我的位置，导航回来等问题。是否有使用＆＃34;多个<router-outlets>＆＃34;的最佳做法？（例如懒惰加载）？

谢谢！

Answer 1

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

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

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

所有角度应用程序必须在基本组件（通常为AppComponent）上具有<router-outlet>。这是所有Angular应用程序的要求。

您可能还需要考虑使用辅助路由 - 这些是可选的，并允许您在不同的“位置”加载组件。你可以阅读它们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返回的逻辑，用户将看到Option1组件（当为true时）或Option2组件（当为false时）。

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

1 个答案: