angular-cn/aio/content/start/start-routing.md

115 lines
6.3 KiB
Markdown

# Adding navigation
This guide builds on the first step of the Getting Started tutorial, [Get started with a basic Angular app](start "Get started with a basic Angular app").
At this stage of development, the online store application has a basic product catalog.
In the following sections, you'll add the following features to the application:
* Type a URL in the address bar to navigate to a corresponding product page.
* Click links on the page to navigate within your single-page application.
* Click the browser's back and forward buttons to navigate the browser history intuitively.
{@a define-routes}
## Associate a URL path with a component
The application already uses the Angular `Router` to navigate to the `ProductListComponent`.
This section shows you how to define a route to show individual product details.
1. Generate a new component for product details.
In the file list, right-click the `app` folder, choose `Angular Generator` and `Component`.
Name the component `product-details`.
1. In `app.module.ts`, add a route for product details, with a `path` of `products/:productId` and `ProductDetailsComponent` for the `component`.
<code-example header="src/app/app.module.ts" path="getting-started/src/app/app.module.ts" region="product-details-route">
</code-example>
1. Open `product-list.component.html`.
1. Modify the product name anchor to include a `routerLink` with the `product.id` as a parameter.
<code-example header="src/app/product-list/product-list.component.html" path="getting-started/src/app/product-list/product-list.component.html" region="router-link">
</code-example>
The `RouterLink` directive helps you customize the anchor element.
In this case, the route, or URL, contains one fixed segment, `/products`.
The final segment is variable, inserting the `id` property of the current product.
For example, the URL for a product with an `id` of 1 would be similar to `https://getting-started-myfork.stackblitz.io/products/1`.
1. Verify that the router works as intended by clicking the product name.
The application should display the `ProductDetailsComponent`, which currently says "product-details works!"
Notice that the URL in the preview window changes.
The final segment is `products/#` where `#` is the number of the route you clicked.
<div class="lightbox">
<img src="generated/images/guide/start/product-details-works.png" alt="Product details view with updated URL">
</div>
## View product details
The `ProductDetailsComponent` handles the display of each product.
The Angular Router displays components based on the browser's URL and [your defined routes](#define-routes).
In this section, you'll use the Angular Router to combine the `products` data and route information to display the specific details for each product.
1. In `product-details.component.ts`, import `ActivatedRoute` from `@angular/router`, and the `products` array from `../products`.
<code-example header="src/app/product-details/product-details.component.ts" path="getting-started/src/app/product-details/product-details.component.1.ts" region="imports">
</code-example>
1. Define the `product` property.
<code-example header="src/app/product-details/product-details.component.ts" path="getting-started/src/app/product-details/product-details.component.1.ts" region="product-prop">
</code-example>
1. Inject `ActivatedRoute` into the `constructor()` by adding `private route: ActivatedRoute` as an argument within the constructor's parentheses.
<code-example header="src/app/product-details/product-details.component.ts" path="getting-started/src/app/product-details/product-details.component.1.ts" region="props-methods">
</code-example>
`ActivatedRoute` is specific to each component that the Angular Router loads.
`ActivatedRoute` contains information about the route and the route's parameters.
By injecting `ActivatedRoute`, you are configuring the component to use a service.
The [Managing Data](start/start-data "Try it: Managing Data") step covers services in more detail.
1. In the `ngOnInit()` method, extract the `productId` from the route parameters and find the corresponding product in the `products` array.
<code-example path="getting-started/src/app/product-details/product-details.component.1.ts" header="src/app/product-details/product-details.component.ts" region="get-product">
</code-example>
The route parameters correspond to the path variables you define in the route.
To access the route parameters, we use `route.snapshot`, which is the `ActivatedRouteSnapshot` that contains information about the active route at that particular moment in time.
The URL that matches the route provides the `productId` .
Angular uses the `productId` to display the details for each unique product.
1. Update the `ProductDetailsComponent` template to display product details with an `*ngIf`.
If a product exists, the `<div>` renders with a name, price, and description.
<code-example header="src/app/product-details/product-details.component.html" path="getting-started/src/app/product-details/product-details.component.html" region="details">
</code-example>
The line, `<h4>{{ product.price | currency }}</h4>`, uses the `currency` pipe to transform `product.price` from a number to a currency string.
A pipe is a way you can transform data in your HTML template.
For more information about Angular pipes, see [Pipes](guide/pipes "Pipes").
When users click on a name in the product list, the router navigates them to the distinct URL for the product, shows the `ProductDetailsComponent`, and displays the product details.
<div class="lightbox">
<img src="generated/images/guide/start/product-details-routed.png" alt="Product details page with updated URL and full details displayed">
</div>
For more information about the Angular Router, see [Routing & Navigation](guide/router "Routing & Navigation guide").
## What's next
You have configured your application so you can view product details, each with a distinct URL.
To continue exploring Angular:
* Continue to [Managing Data](start/start-data "Try it: Managing Data") to add a shopping cart feature, manage cart data, and retrieve external data for shipping prices.
* Skip ahead to [Deployment](start/start-deployment "Try it: Deployment") to deploy your application to Firebase or move to local development.