这回直接进入4.x时代学习,其实和2.x没啥区别,具体升级步骤可以查看下面链接,或者直接克隆源代码
http://blog.luamas.com/2017/03/26/angular4-angular2-upgrade
下面我们重新创建一个分支来演示
ng new angular2-sample
安装bootstrap
npm install bootstrap --save
安装字体图标库
npm install font-awesome
引用bootstrap
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css","../node_modules/font-awesome/css/font-awesome.css","styles.css"
],
// 创建layout模型 ng g m layout // 创建layout(布局)组件 ng g c layout // 创建header(头部)组件 ng g c layout/header // 创建footer(尾部)组件 ng g c layout/footer // 创建sidebar(侧边栏)组件 ng g c layout/sidebar // 创建routes模型 ng g m routes // 创建home模型 ng g m routes/home // 创建首页组件 ng g c routes/home/home // 创建路由类 ng g cl routes/routes
注意使用路由的模块千万别忘记导入RouterModule模块,自己在这里卡了好久才找到,本以为布局中没有用到,不需要单独import,最后找到原来是这里的问题
路由的使用
routes.ts
export const routes = [
{
path: '',component: LayoutComponent,children: [
{ path: '',redirectTo: 'home',pathMatch: 'full' },{ path: 'home',loadChildren: 'app/routes/home/home.module#HomeModule' },{ path: 'input',loadChildren: 'app/routes/input/input.module#InputModule' },{ path: 'myform',loadChildren: 'app/routes/myform/myform.module#MyformModule' }
]
},// Not found
{ path: '**',redirectTo: 'home' }
];
routes.module.ts
imports: [
CommonModule,RouterModule.forRoot(routes)
],
使用页面
<router-outlet></router-outlet>
链接方式
<a class="dropdown-item" [routerLink]="['/input/keyup']" [routerLinkActive]="['active']" class="list-group-item">
<i class="fa fa-fw fa-dashboard"></i> 键盘事件1
</a>
上面的routerLink代表地址,routerLinkActive代表如果状态生效则会附加active的css样式
这节基本没啥太多的东西,主要是要组织好结构,至于手动导航页面直接取官网例子看下
// router直接注入router对象即可,注意要import下 this.router.navigate(['/hero',hero.id]);
具体查看下代码,不得不说自己不是搞前端的,哎,被css的东西把自己搞的整天都没啥心情.
如要转载，请保持本文完整，并注明作者luamas和本文原始地址：http://blog.luamas.com/2017/03/27/angular4-route/
