Angular 5：无需路由即可延迟加载组件

typescript

# Angular 5：无需路由即可延迟加载组件

Angular是一种流行的前端框架，提供了丰富的功能和灵活性。在Angular 5中，延迟加载组件是一项强大的特性，可以帮助优化应用程序的性能。本文将介绍如何在Angular 5中实现无需路由即可延迟加载组件的方法，并提供一个简单的案例代码。

## 什么是延迟加载？

延迟加载是指在应用程序启动时不立即加载所有组件，而是在需要时动态加载它们。这可以显著减小初始加载时间，使应用程序更加高效。在Angular中，通常通过路由来实现延迟加载，但我们将探讨一种不依赖路由的方法。

## 使用Angular的ngIf指令

在Angular中，我们可以使用ngIf指令根据条件来加载组件。这为我们提供了一种在不使用路由的情况下实现延迟加载的方式。

typescript
import { Component, NgModule, Input } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
@Component({
  selector: 'lazy-loaded-component',
  template: '<div *ngIf="loaded">这是一个延迟加载的组件</div>',
})
export class LazyLoadedComponent {
  @Input() loaded: boolean = false;
}
@Component({
  selector: 'app-root',
  template: <code>
    <h1>Angular 5 延迟加载组件</h1>
    <lazy-loaded-component [loaded]="loadComponent"></lazy-loaded-component>
    <button (click)="loadComponent = true">加载组件</button>
  </code>,
})
export class AppComponent {
  loadComponent: boolean = false;
}
@NgModule({
  imports: [BrowserModule],
  declarations: [AppComponent, LazyLoadedComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

在这个例子中，我们有一个LazyLoadedComponent，它包含一个简单的