动态组件加载程序与延迟加载 [英] Dynamic Component Loader vs. Lazy Loading

问题描述

Dynamic Component Loader和Lazy Loading有什么区别?我需要构建一个应用程序，该应用程序在应用程序的根目录需要有一个<router-outlet>.我的问题是我不知道如何实现一个组件，该组件可以根据数据动态地渲染子组件.我目前的方法基于Dynamic Component Loader，但是使用这种技术时，我遇到了有关跟踪位置，向后导航等问题. 是否有使用"multiple <router-outlets>"(例如延迟加载)的最佳实践?

谢谢！

解决方案

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

延迟加载是一种将应用程序拆分为延迟加载(在后台)的模块的方法，而不是一开始就加载整个应用程序.这样可以帮助您更快地加载应用程序，从而比不使用延迟加载的应用程序更快地呈现首页.

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

所有角度应用程序的基本组件(通常为AppComponent)必须具有<router-outlet>.这是所有Angular应用程序的要求.

您可能还需要考虑使用辅助路线-这些是可选路线，允许您将组件加载到不同的位置".您可以在这里

或者，您可以(对于简单情况)仅使用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时).

What is the difference between Dynamic Component Loader and Lazy Loading? I need to build an application that needs to have an <router-outlet> at the root of the application. My Problem is that I don't know how to implement a Component that renders Child-Components according to data, dynamically. My current approach builds up on Dynamic Component Loader, but using this technique I have issues concerning tracking my location, navigate back, etc. Is there any best practice for using "multiple <router-outlets>" (e.g. Lazy Loading)?

Thanks!

解决方案

Loading components dynamically is not related to Lazy Loading.

Lazy Loading is a way to split up your application into modules that are loaded lazily (in the background) instead of loading your entire application at the start. This helps your app load more quickly so the first page is rendered sooner than it would if you did not use lazy loading.

For example, you might have a settings menu which loads various settings, but you don't expect users to visit that menu very often, so you put all the components for settings into a module and then you set that module to be loaded lazily (in other words none of that code needs to be downloaded unless a user actually visits the /settings route).

All angular applications must have a <router-outlet> at the base component (usually AppComponent). This is a requirement of all Angular applications.

You may want to consider also using auxiliary routes - these are optional, and allow you to load components in different 'places'. You can read about them here

Alternatively you can (for simple cases) just use ngIf, like this:

/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>;
}

So based on the logic the method isOption1 returns, the user will see either Option1 component (when true) or the Option2 component (when false).

这篇关于动态组件加载程序与延迟加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！