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

随着最近 angular 2 的正式发布，现在是了解一些最大变化的好时机。 

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

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

如何在 Angular 2 中创建路由

为什么使用路由？

可以在没有路由的情况下在 Angular 2 中构建一个完整的应用程序。所以如果我们能做到这一点，为什么我们还需要路由呢？ 

主要原因是如果我们不使用路由，我们的应用程序将完全依赖于通过程序控制进行导航。我们将不得不根据用户交互来切换组件，例如当他们点击某些东西时。

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

如何设置路由

首先，为了使路由工作，我们需要在索引的头部添加一个基本的 href。.html文件。 

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

应用程序.routes.ts

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

我们将添加到此文件的第一件事是导入。

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

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

const routes: RouterConfig = [
    
    ];

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

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

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

首先我们有我们的路径，它是一条空路径。这是我们的应用程序将启动的路线。然后我们有我们的重定向，它会在遇到空路由时改变我们到家的路径。之后，我们有我们的. 我不会详细说明，只是说这会导致空路由匹配重定向。pathmatch

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

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

添加重定向后，我们键入的任何不存在的路由都会得到我们的错误页面。然后我们使用 Angular 路由器的提供路由器方法导出另一个常量。我们使用通过此方法配置的路由。 

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

main.ts

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

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

如何在 Angular 2 中托管路由

将应用程序配置为托管路由

到目前为止，我们已经配置了我们的路线并将它们添加到我们的引导函数中。现在，我们只需要配置我们的应用程序组件来托管我们的路线。

app.component.ts应该是这样的：

首先，我们导入我们的路由器指令。当组件需要使用路由器链接时，我们之前已经看到过这种情况。该组件将使用路由器链接和 Angular 2 路由器出口的另一个指令。之后，我们删除模板并添加一个反引号使其成为模板字符串。这将允许我们创建一个多行模板。 

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

然后我们添加一个无序列表。在里面，我们将添加导航栏的链接。在我们的链接中，我们有routerLink. 这就是我们在用户交互下导航到路线的方式。在这里，当我们单击此按钮时，我们将导航到主路由。

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

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

之后，我们需要做的最后一件事是在style.css文件中添加一个css规则：

.menu {
    background-color: white;
}

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

测试路由

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

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

如果您注意到，主页链接背景为白色阴影。这是因为这是活动路线。然后，如果我们单击“关于”按钮，我们应该转到“关于”页面。

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

我们现在可以在我们的应用程序中使用路由，但我们可以用它做更多的事情。在课程的其余部分，您将更深入地研究路由。