我们可以通过下面几步操作，让 Angular 应用支持路由功能：
- 在 Angular 应用中设置基础路径。
- 使用
@angular/router包中的模块。 - 配置 Angular 应用的路由。
- 匹配导航地址和渲染的组件。
基础路径
在现代浏览器中，都已经支持 HTML5. 我们能够在不向服务器发送请求的情况下，通过改变浏览器的 URL 或历时记录，切换不同的视图页面。这种技术称为 HTML 5 pushState.
在 Angular 应用中，为了启用 pushState 路由功能，我们必须在 index.html 文件中配置 base 标签。
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>MyApp</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
在使用 Angular CLI 命令创建应用时，会默认创建 base 标签，设置 href 的值为根 /.
导入路由
在 Angular 10 应用中，路由功能可以根据给定 URL 展示一个特定的组件模板视图。Angular 框架提供了 @angular/router npm 包，但是因为路由不属于 Angular 核心功能，我们需要手工导入：
import { RouterModule, Routes } from '@angular/router';
配置路由
在基于路由的 Angular 应用中，路由器服务是一个单实例对象。路由器服务默认不包含任何路由，我们必须进行配置。下面我们定义了三个路由，并通过 RouterModule.forRoot() 方法进行配置。
const routes: Routes = [
{ path: 'books/:id', component: BookDetailComponent },
{
path: 'books',
component: BookListComponent,
data: { title: 'Heroes List' }
},
{ path: '**', component: PageNotFoundComponent }
];
@NgModule({
imports: [
RouterModule.forRoot(
routes,
{ enableTracing: true } // <-- debugging purposes only
)
// other imports here
],
...
})
export class AppModule { }
路由数组 routes 描述了如何进行组件视图的导航。
每个路由都映射一个路径到组件。该路径由 path 属性指定，其值不包含前导 /.
第二个路由中的 :id 表示路由参数，转换为 URL 表示为路径参数，如 /books/7，其中"7"就是 id 参数的值。
路由的 data 参数可以存储与路由相关的任何数据，如页面标题，导航文本和其他只读的静态数据。
在应用中导航时，我们既可以改变浏览器的 URL，也可以在代码中通过路由器服务激活一个路由完成组件的切换。
渲染组件
在 RouterModule.forRoot(routes) 方法返回的模块中，包含了一个重要的指令 router-outlet. router-outlet 指令的使用更像是一个组件，但是他本身不显示任何内容，而是作为一个占位符，标记了路由器显示组件的位置。
在 Angular 10 的应用中，AppComponent 组件通常用来构建应用主体布局，并编排所有其他组件。典型示例如下：
<app-header></app-header>
<router-outlet></router-outlet>
<!-- 可路由的组件放置在这里 -->
<app-footer></app-footer>
在上面的布局中，app-header 和 app-footer 是布局组件；而在 router-outlet 指令 所在的位置，渲染其他可路由的组件，并且这些组件与 router-outlet 指令位于同一层级。
网友评论