如何在Angular 2中设置基本路由

随着Angular 2的最新正式发布，现在是赶上一些最大变化的好时机。

发生了很大变化的一件事是Angular 2路由器，在最终版本的发布中已完全替换了它。 因此，在我的Angular 2路由课程的这两段快速视频教程中，我将向您展示如何创建路由配置以及如何在应用程序中使用它们。 您将了解简单的路由，重定向和通配符路由。 然后，您将看到如何使用指令来配置您的应用程序组件以显示路线。

这些视频是本课程以前的课程的后续内容，但是您应该可以了解我们使用的技术。 您可以在GitHub上找到整个项目的源文件。

如何在Angular 2中创建路线

为什么要使用路由？

无需路由即可在Angular 2中构建完整的应用程序。 因此，如果我们能够做到这一点，为什么我们根本需要路由？

主要原因是，如果不使用路由，我们的应用将仅依赖于通过程序控制进行导航。 我们将不得不基于用户交互（例如当他们单击某物时）来关闭组件。

使用路由，我们将能够通过切换URL进行导航。 所有组件都将映射到一条路线，从而使我们可以轻松地在应用程序中移动。

如何设置路由

首先，为了使路由工作，我们需要在index.html文件的开头添加基本href。

以前，我们将在承载它们的组件内部配置路由。 在这种情况下，这意味着我们将路由配置添加到我们的app.component文件中。 对于新的路由器，建议我们在单独的文件中创建路由配置。

app.routes.ts

因此，让我们在app文件夹的根目录中创建一个名为app.routes.ts的文件。

我们要添加到该文件的第一件事是导入。

首先，从Angular路由器中获取provideRouter或RouterConfig 。 然后从pages文件夹导入About，Error和Home组件。 我们需要导入这些，以便我们可以路由到这些组件。

我们要做的下一件事是添加我们的路由配置来保存我们的路由：

const routes: RouterConfig = [
    
    ];

在这里，我们使用一个const声明。 这是我们可以在TypeScript中声明变量的方法之一，它表示无法更改的值。 在这种情况下，我们将使用它来保存RouterConfig 。

现在，我们要添加的第一件事是重定向。 稍后，我们将为错误页面添加通配符路由。 这本身将导致我们的应用从错误页面启动。 原因是当我们的应用启动时，它没有路由。 因此，我们需要指定一个组件作为默认路由。

我们可以轻松地将要启动应用程序的组件添加到空路由，但是建议的处理方式是使用重定向。 重定向必须先执行，否则将无法正常工作。 外观如下：

首先，我们有一条路，这是一条空路。 这是我们的应用程序启动的路线。 然后，我们进行重定向，当遇到空路由时，它将重定向到home的路径。 之后，我们有了pathMatch 。 除了要说这会导致空路由匹配重定向之外，我将不做更多详细说明。

然后，我们的路线指向AboutComponent 。 路径设置为'about' ，这是我们导航到该路线时将在地址栏中看到的内容。 将导航到的组件是AboutComponent 。 之后，我们有了HomeComponent 。 路径为'home' ，要启动的组件为HomeComponent 。

这是我们将从重定向导航到的路由。 然后，我们要添加的最后一条路由是通配符路由。 这将匹配我们定义的任何路由。 这也是我们添加重定向的原因。 如果不这样做，则我们的应用程序将从此路由启动，因为我们从未定义的路由（空路由）开始。

添加重定向后，我们键入的任何不存在的路由都将显示错误页面。 然后，我们使用Angular路由器中的Provide路由器方法导出另一个const。 我们使用通过此方法配置的路由。

一旦这样做，我们的路线就完成了。 我们要做的最后一件事是将路由添加到我们的应用程序。

主要

转到main.ts文件。 我们在此文件中要做的第一件事是从创建的应用程序路由文件中导入myRouterProviders 。 然后，我们必须将其添加到我们的引导程序函数中。 在此处添加它们的好处是使路由可用于我们应用程序中的所有组件。

完成后，我们就完成了路线设置。 在下一个视频中，我们将完成路由配置并预览应用程序。

如何在Angular 2中托管路线

配置应用程序以托管路由

到目前为止，我们已经配置了路由并将其添加到引导功能中。 现在，我们只需要配置我们的应用程序组件即可托管我们的路线。

这是app.component.ts的外观：

首先，我们导入路由器指令。 在组件需要使用路由器链接之前，我们已经看到了这一点。 该组件将使用路由器链接和Angular 2路由器插座的另一个指令。 之后，我们删除模板并添加反引号使其成为模板字符串。 这将使我们能够创建多行模板。

首先，我们为引导导航栏添加一个div 。 由于它是模板的一部分，因此该导航栏将显示在每个页面上。 然后在导航栏中，添加我们的品牌。 它可以是文本或图像，代表您的应用品牌。

然后，我们添加一个无序列表。 在内部，我们将为导航栏添加链接。 在我们的链接中，我们有routerLink ，而不是要导航的URL。 这就是我们在用户交互下导航到路线的方式。 单击此按钮后，我们将在此处导航到本国路线。

我们还可以在数组内以另一种形式编写routerLink 。 通常，当我们需要向路线提供更多信息时，我们会这样做。 然后，我们还有一个routerLinkActive指令，当路由处于活动状态时，该指令会将菜单类应用于链接。 我们正在使用它来显示关于我们所处页面的视觉提示。

然后，我们将添加另一个导航到“关于”页面的路由器链接。 然后，我们将添加router-outlet指令。 这就是为什么组件不需要选择器的原因。 当它们加载到路由时，此伪指令将托管组件。 虽然此模板的其余部分将在每个页面上显示为静态，但是router-outlet将根据导航到的路线而变化。 最后，对于该文件，我们添加路由器指令。

之后，我们要做的最后一件事是将CSS规则添加到style.css文件中：

.menu {
    background-color: white;
}

此规则适用于在连接到路由器链接的路由处于活动状态时将应用的类。 链接的背景将为白色。 现在，为我们的应用配置了路由。

测试路由

继续并保存项目， npm start在项目文件夹中运行npm start 。

如果一切都正确完成，则应编译该应用程序，然后从Web浏览器启动。

如果您注意到，主页链接背景将以白色阴影显示。 这是因为这是活动路径。 然后，如果单击“ 关于”按钮，则应转到“关于”页面。

之后，让我们在地址栏中输入一条不存在的路由。 当我们这样做时，我们应该得到一个错误页面。

现在，我们的应用程序中可以进行路由了，但是我们可以做的还很多。 在本课程的其余部分中，您将更深入地研究路由。

观看完整课程

在整个课程Angular 2 Routing中 ，我将教您如何在应用程序中使用新的Angular 2路由器。 您将看到如何配置到静态页面的基本路由，如何从路由路径提取参数以及如何使路由模块化。 您还将看到如何使用Angular 2路由器实现用户访问控制。

翻译自: https://code.tutsplus.com/tutorials/angular-2-routing--cms-27275