要使用 Angular 的路由功能,你需要保证项目里的已经安装了 @angular/router 这个包,在创建 Angular 项目的时候我选择了要使用 Router 功能,所以项目里直接就会包含这个包。
你可以直接在 AppModule 里配置使用路由,或者也可以单独创建一些 Routing 类型的模块。比如在我们这个项目里,有个 AppRoutingModule 模块。
在这个模块里之前我们已经定义了几条路由,路由一般都有一个 path,它是路由的地址,还有一个 component,就是打开这个地址要显示的组件。
定义路由的时候可以在地址里包含一些参数,这些参数可以使用冒号开头,比如这个 posts/:id,最后的这个 :id 就是这个地址里的参数,也就是它的值是动态的,这里表示的就是内容的 id 号。
在路由对应的组件里我们可以得到这个地址里的 id 参数的值,然后可以根据这个值动态的去获取到组件里需要的对应的那个内容数据。
在 AppComponent 的模板文件里,用了一个 router-outlet,路由对应的视图显示在 router-outlet 这里。
在路由模块里需要导入 RouterModule 模块,这个模块来自 @angular/router 这个包。
在这个 AppRoutingModule 模块里,用了 RouterModule 的 forRoot 方法配置了一下路由,把上面定义好的 routes 交给了这个方法。然后在模块的 exports 里导出了这个 RouterModule。
这样在 AppModule 里面导入了这个 AppRoutingModule 模块以后就可以使用路由功能了,应用里会包含我们在 AppRoutingModule 里定义的这些路由。
预览
再到浏览器上试一下,访问 posts ,会显示一个内容列表,点击打开列表里面的一个内容项目,会显示对应的内容。