# Add in-app navigation (routing) # 路由 There are new requirements for the Tour of Heroes app: 有一些《英雄指南》的新需求： * Add a *Dashboard* view. 添加一个*仪表盘*视图。 * Add the ability to navigate between the *Heroes* and *Dashboard* views. 添加在*英雄列表*和*仪表盘*视图之间导航的能力。 * When users click a hero name in either view, navigate to a detail view of the selected hero. 无论在哪个视图中点击一个英雄，都会导航到该英雄的详情页。 * When users click a *deep link* in an email, open the detail view for a particular hero. 在邮件中点击一个*深链接*，会直接打开一个特定英雄的详情视图。 When you’re done, users will be able to navigate the app like this: 完成时，用户就能像这样在应用中导航：
View navigations
## Add the `AppRoutingModule` ## 添加 `AppRoutingModule` In Angular, the best practice is to load and configure the router in a separate, top-level module that is dedicated to routing and imported by the root `AppModule`. 在 Angular 中，最好在一个独立的顶级模块中加载和配置路由器，它专注于路由功能，然后由根模块 `AppModule` 导入它。 By convention, the module class name is `AppRoutingModule` and it belongs in the `app-routing.module.ts` in the `src/app` folder. 按照惯例，这个模块类的名字叫做 `AppRoutingModule`，并且位于 `src/app` 下的 `app-routing.module.ts` 文件中。 Use the CLI to generate it. 使用 CLI 生成它。 ng generate module app-routing --flat --module=app
`--flat` puts the file in `src/app` instead of its own folder.
`--module=app` tells the CLI to register it in the `imports` array of the `AppModule`. `--flat` 把这个文件放进了 `src/app` 中，而不是单独的目录中。
`--module=app` 告诉 CLI 把它注册到 `AppModule` 的 `imports` 数组中。
The generated file looks like this: 生成的文件是这样的： Replace it with the following: 把它替换为如下代码： First, `AppRoutingModule` imports `RouterModule` and `Routes` so the app can have routing functionality. The next import, `HeroesComponent`, will give the Router somewhere to go once you configure the routes. 首先，`AppRoutingModule` 会导入`RouterModule` 和 `Routes`，以便该应用具有路由功能。配置好路由后，接着导入 `HeroesComponent`，它将告诉路由器要去什么地方。 Notice that the `CommonModule` references and `declarations` array are unnecessary, so are no longer part of `AppRoutingModule`. The following sections explain the rest of the `AppRoutingModule` in more detail. 注意，对 `CommonModule` 的引用和 `declarations` 数组不是必要的，因此它们不再是 `AppRoutingModule` 的一部分。以下各节将详细介绍 `AppRoutingModule` 的其余部分。 ### Routes ### 路由 The next part of the file is where you configure your routes. *Routes* tell the Router which view to display when a user clicks a link or pastes a URL into the browser address bar. 该文件的下一部分是你的路由配置。 *Routes* 告诉路由器，当用户单击链接或将 URL 粘贴进浏览器地址栏时要显示哪个视图。 Since `AppRoutingModule` already imports `HeroesComponent`, you can use it in the `routes` array: 由于 `AppRoutingModule` 已经导入了 `HeroesComponent`，因此你可以直接在 `routes` 数组中使用它： A typical Angular `Route` has two properties: 典型的 Angular `Route` 具有两个属性： * `path`: a string that matches the URL in the browser address bar. `path`: 用来匹配浏览器地址栏中 URL 的字符串。 * `component`: the component that the router should create when navigating to this route. `component`: 导航到该路由时，路由器应该创建的组件。 This tells the router to match that URL to `path: 'heroes'` and display the `HeroesComponent` when the URL is something like `localhost:4200/heroes`. 这会告诉路由器把该 URL 与 `path：'heroes'` 匹配。 如果网址类似于 `localhost:4200/heroes` 就显示 `HeroesComponent`。 ### `RouterModule.forRoot()` The `@NgModule` metadata initializes the router and starts it listening for browser location changes. `@NgModule` 元数据会初始化路由器，并开始监听浏览器地址的变化。 The following line adds the `RouterModule` to the `AppRoutingModule` `imports` array and configures it with the `routes` in one step by calling `RouterModule.forRoot()`: 下面的代码行将 `RouterModule` 添加到 `AppRoutingModule` 的 `imports` 数组中，同时通过调用 `RouterModule.forRoot()` 来用这些 `routes` 配置它：
The method is called `forRoot()` because you configure the router at the application's root level. The `forRoot()` method supplies the service providers and directives needed for routing, and performs the initial navigation based on the current browser URL. 这个方法之所以叫 `forRoot()`，是因为你要在应用的顶级配置这个路由器。 `forRoot()` 方法会提供路由所需的服务提供商和指令，还会基于浏览器的当前 URL 执行首次导航。
Next, `AppRoutingModule` exports `RouterModule` so it will be available throughout the app. 接下来，`AppRoutingModule` 导出 `RouterModule`，以便它在整个应用程序中生效。 ## Add `RouterOutlet` ## 添加路由出口 `RouterOutlet` Open the `AppComponent` template and replace the `` element with a `` element. 打开 `AppComponent` 的模板，把 `` 元素替换为 `` 元素。 The `AppComponent` template no longer needs `` because the app will only display the `HeroesComponent` when the user navigates to it. `AppComponent` 的模板不再需要 ``，因为只有当用户导航到这里时，才需要显示 `HeroesComponent`。 The `` tells the router where to display routed views. `` 会告诉路由器要在哪里显示路由的视图。
The `RouterOutlet` is one of the router directives that became available to the `AppComponent` because `AppModule` imports `AppRoutingModule` which exported `RouterModule`. The `ng generate` command you ran at the start of this tutorial added this import because of the `--module=app` flag. If you manually created `app-routing.module.ts` or used a tool other than the CLI to do so, you'll need to import `AppRoutingModule` into `app.module.ts` and add it to the `imports` array of the `NgModule`. 能在 `AppComponent` 中使用 `RouterOutlet`，是因为 `AppModule` 导入了 `AppRoutingModule`，而 `AppRoutingModule` 中导出了 `RouterModule`。 在本教程开始时你运行的那个 `ng generate` 命令添加了这个导入，是因为 `--module=app` 标志。如果你手动创建 `app-routing.module.ts` 或使用了 CLI 之外的工具，你就要把 `AppRoutingModule` 导入到 `app.module.ts` 中，并且把它添加到 `NgModule` 的 `imports` 数组中。
#### Try it #### 试试看 You should still be running with this CLI command. 你的 CLI 命令应该仍在运行吧。 ng serve The browser should refresh and display the app title but not the list of heroes. 浏览器应该刷新，并显示着应用的标题，但是没有显示英雄列表。 Look at the browser's address bar. The URL ends in `/`. The route path to `HeroesComponent` is `/heroes`. 看看浏览器的地址栏。 URL 是以 `/` 结尾的。 而到 `HeroesComponent` 的路由路径是 `/heroes`。 Append `/heroes` to the URL in the browser address bar. You should see the familiar heroes master/detail view. 在地址栏中把 `/heroes` 追加到 URL 后面。你应该能看到熟悉的主从结构的英雄显示界面。 {@a routerlink} ## Add a navigation link (`routerLink`) ## 添加路由链接 (`routerLink`) Ideally, users should be able to click a link to navigate rather than pasting a route URL into the address bar. 理想情况下，用户应该能通过点击链接进行导航，而不用被迫把路由的 URL 粘贴到地址栏。 Add a `