angularcli 第八篇（router 路由）

页面有两个按钮（test1、test2），点击这两个按钮，跳转相应页面~

注：创建一个带路由模块的项目：ng new project --routing 

 （下面针对新建项目时没有带路由，后边再来新建路由）

1、新建两个页面 test1、test2（html、css、ts）：       ng g component test1

2、新建路由模块app.routing.ts ：                                  ng generate module app-routing --flat --module=app

• 在 app.routing.ts 中 import 根组件、子组件路由组件等；
• 在 app.routing.ts 中 编写路由路径const routes；

3、在app.modules.ts中：

• 导入根组件路由组件，以及相应子组件（test1、test2）   import { AppRoutingModules } from "./app/routing";
• 在 import:[......]中添加相应路由组件（routing）
• 初始化路由器imports: [ RouterModule.forRoot(routes) ],  基于浏览器的当前 URL 执行首次导航

 

扫描二维码关注公众号，回复： 3035286 查看本文章

 3、在app.component.ts中添加相应的按钮，以及路由路径