今天学习了下 Angular 的路由，一路的看下来并且边看边练习操作，到最后以为自己都弄懂了但回过头来发现思绪还是有点混乱，所以边学习边做笔记还是很有必要的，现将路由的学习整理一下。

一、在项目中创建路由

创建的方式有两种，一种是直接通过命令直接带有路由的新项目，二种是在已有项目的中创建路由。

1.1、在终端通过命令直接带有路由的新项目

可通过以下的命令来创建

ng new projectName --routing

执行命令之后就要等待命令的执行完成，需要点时间。

接下来就是路由配置，当使用“–routing”这个命令来创建新项目时，它会在项目中为我们创建一个文件名为“app-routing.module.ts”的文件，而它就是“AppRoutingModule”是 APP 的 routing 模块，那么所有的路由信息的配置都在这里进行。

1.2、在已有项目的 AppModule 中创建路由

如下代码：

……
const routeConfig: Routes = [
  ……
];

@NgModule({
  ……
})
export class AppModule { }

二、路由的基本配置

在这里创建了三个组件，分别是 home（首页） 、 user（用户）和 404，组件里面的具体展示内容就不多写了。在路由配置文件里面对“const routes: Routes”这个数组中添加路由信息。

// 当只是单纯的域名访问时转到首页路由
{path: '', redirectTo: '/home', pathMatch: 'full'},
// 首页路由，这是根路由不要带有斜杠和点
// path 是 URL 路径
// component 显示的是哪个组件
{path: 'home', component: HomeComponent},
// 用户路由
{path: 'user', component: UserComponent, data: [{isExists: true}]},
// 404路由
{path: '**', component: Code404Component}

然后再在“app.component.html”中添加切换视图的 HTML 代码。

2.1、以下命令是通过在 HTML 中标记路由内容呈现位置的点位符指令来实现

<!--导航-->
<a [routerLink]="['/home']">home</a>
<a [routerLink]="['/user']">user</a>
<!--路由的插座-->
<router-outlet></router-outlet>

2.2、通过调用 navigate() 和 navigateByUrl() 方法来导航到一个指定的路由

HTML 代码：

<input type="button" value="to user" (click)="toUserDetail()" />

在控制器中 TS 代码 ：

export class AppComponent {
 title = 'app';
 constructor(private router:Router){}
 toUserDetail() {
 this.router.navigate(['/user']);
 }
}

转载请注明：隨習筆記 » Angular笔记：路由