我的书签
添加书签
移除书签Defining Child Routes
For example: The product details page may have a tabbed navigation section that shows the product overview by default. When the user clicks the "Technical Specs" tab the section shows the specs instead.
If the user clicks on the product with ID 3, we want to show the product details page with the overview:
When the user clicks "Technical Specs":
localhost:3000/product-details/3/specs
overview and specs are child routes of product-details/:id. They are only reachable within product details.
Where would the components for these child routes be displayed? Just like we had a for the root application component, we would have a router outlet inside the ProductDetails component. The components corresponding to the child routes of product-details would be placed in the router outlet in ProductDetails.
Alternatively, we could specify overview route URL simply as:
localhost:3000/product-details/3
Since the child route of product-details has an empty path, it will be loaded by default. The specs child route remains the same.
View Example with child routes
View Example child routes accessing parent's route parameters
Links
Routes can be prepended with /, or ../; this tells Angular where in the route tree to link to.
Example:
In the above example, the link for route one links to a child of the current route.The link for route two links to a sibling of the current route.The link for route three links to a child of the root component (same as route one link if current route is root component).
