HTML 在Angular 2中导航路由时显示加载界面

在本文中，我们将介绍如何在Angular 2中导航路由时显示加载界面。在一个大型的Angular 2应用中，当用户导航到新的路由时，数据加载可能会花费一些时间。为了提供更好的用户体验，我们可以在数据加载时显示一个加载界面，告诉用户正在加载中。

阅读更多：HTML 教程

什么是Angular 2？

Angular 2是一个用于构建Web应用的开发框架。它采用了组件化的架构，使得前端开发更加模块化和可维护。在Angular 2中，我们可以通过路由来管理不同的页面和视图。当用户导航到不同的路由时，Angular 2会加载相应的组件和数据。

在路由导航时显示加载界面

为了在路由导航时显示加载界面，我们可以使用Angular 2的路由事件。当路由导航开始时，我们可以显示加载界面，当路由导航完成时，我们可以隐藏加载界面。

下面是一个示例代码，展示了如何在Angular 2中实现路由导航时显示加载界面的功能：

// app.component.ts

import { Component, OnInit } from '@angular/core';
import { Router, NavigationStart, NavigationEnd } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  loading: boolean = false;

  constructor(private router: Router) {}

  ngOnInit() {
    this.router.events.subscribe(event => {
      if (event instanceof NavigationStart) {
        this.loading = true;
      } else if (event instanceof NavigationEnd) {
        this.loading = false;
      }
    });
  }
}

在上述代码中，我们首先导入了Angular 2的相关模块和依赖项。然后，在AppComponent中定义一个名为loading的布尔变量，用于表示加载界面的显示状态。在组件初始化时，我们订阅了路由事件，并在事件触发时更新加载界面的显示状态。

接下来，我们需要在对应的模板文件中显示加载界面。下面是一个简单的示例：

<!-- app.component.html -->

<div *ngIf="loading" class="loading-screen">
  <div class="spinner"></div>
  <p>Loading...</p>
</div>

<router-outlet></router-outlet>

在上述代码中，我们使用了Angular 2的条件语句*ngIf来判断加载界面是否需要显示。当loading为true时，加载界面将被显示出来。在加载界面中，我们可以添加任意的HTML和CSS样式，以展示一个美观的加载界面。

自定义加载界面

除了上述示例中显示的简单加载界面，我们还可以自定义加载界面，以适应应用的设计和用户需求。下面是一个更为复杂的加载界面示例：

<!-- app.component.html -->

<div *ngIf="loading" class="loading-screen">
  <div class="spinner">
    <div class="bounce1"></div>
    <div class="bounce2"></div>
    <div class="bounce3"></div>
  </div>
  <p>Loading...</p>
</div>

<router-outlet></router-outlet>

在上述代码中，我们使用了一个CSS动画库，创建了一个有趣的加载动画。在加载界面中，我们添加了三个小球，通过动画效果实现了跳动的效果。这样的自定义加载界面可以提高用户的体验感。