摘要：
路由守卫 只有当用户已经登录并拥有某些权限时才能进入某些路由 一个有多个表单组成的向导，如注册流程，用户只有在当前组件的组件中填写了满足要求的信息才可以导航到下一个路由 当用户未执行保存操作而试图离开当前导航时提醒用户 CanActivate： 处理导航到某种路由的情况 CanDeactivate： 阅读全文
posted @ 2017-08-14 14:54 work hard work smart 阅读(536) 评论(0) 推荐(0)
摘要：
1.辅助路由 2. 创建chat组件 ng g component chat 3. 组件html css： 4. 配置路由 5. app.component.html设置 阅读全文
posted @ 2017-08-14 14:23 work hard work smart 阅读(995) 评论(1) 推荐(0)
摘要：
子子路由 现在要为产品组件增加两个子组件 1. 创建productDesc和sellerInfo两个组件 ng g component productDesc ng g component sellerInfo 2. 产品描述组件 3. 销售员组件 销售员组件html 3. 产品组件加入导航 4. 阅读全文
posted @ 2017-08-14 13:51 work hard work smart 阅读(312) 评论(0) 推荐(0)
摘要：
重定向路由： 用户访问一个指定的地址时，将其重新向到另一个指定的地址 （接前面的一节） 配置如下： 之前http://localhost:4200 会进入主页，现在将主页导航改为home，http://localhost:4200也显示404 此时配置重定向，如上图{ path: '', redir 阅读全文
posted @ 2017-08-14 13:22 work hard work smart 阅读(673) 评论(0) 推荐(0)
摘要：
路由时传递数据的方式有 1. 在查询参数中传递数据 2. 在路由路径中传递参数 3. 在路由配置中传递参数 一.在查询参数中传递数据 在前一节的基础上，我们增加路由数据传递 2. 接收参数的地方 3. 显示产品ID 4. 效果图 二、路径中传递参数 1. 修改路由配置 2. 使用路径调用 3. 接收 阅读全文
posted @ 2017-08-14 12:53 work hard work smart 阅读(3089) 评论(0) 推荐(0)
摘要：
Angular 4 路由 1. 创建工程 ng new router --routing 2. 创建home和product组件 ng g component home ng g component product 3. 配置路由 4. 主页面导航 二、按钮事件中实现导航 三、不存在的页面 如果页面 阅读全文
posted @ 2017-08-14 11:55 work hard work smart 阅读(261) 评论(0) 推荐(0)
摘要：
1、media 效果为屏幕宽度变化时，背景颜色也变化 2. 弹性图片 样式如下面的code .img 和 img 阅读全文
posted @ 2017-08-13 21:46 work hard work smart 阅读(271) 评论(0) 推荐(0)
摘要：
1. justify-content <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> 阅读全文
posted @ 2017-08-13 11:21 work hard work smart 阅读(679) 评论(0) 推荐(0)
摘要：
1. 创建指令 2. html 3. 控制器 阅读全文
posted @ 2017-08-11 15:20 work hard work smart 阅读(367) 评论(0) 推荐(0)
摘要：
1. 将表单的方法移动到单独的ts文件夹中 2. code 3. html 4. 控制器 5. 状态字段 阅读全文
posted @ 2017-08-11 14:10 work hard work smart 阅读(658) 评论(0) 推荐(0)
摘要：
1.html 2. 控制器中创建FormModel 3. 创建自定义校验器 mobileValidator用来校验电话号码是否有效 equalValidator 用来校验两次输入的密码是否一致 4. submit方法 5.完整的代码 阅读全文
posted @ 2017-08-11 13:19 work hard work smart 阅读(374) 评论(0) 推荐(0)
摘要：
一. 模板表单 1. 如下图 2. code 3. 效果图 二、响应式表单 1. 增加ReactiveFormsModule 2.响应式表单用到的类和指令 3. 控制器代码 4. html 6. 效果图 7. 使用FormBuild简化响应式表单代码 原来的写法 使用FormBuild简化 阅读全文
posted @ 2017-08-11 11:55 work hard work smart 阅读(495) 评论(0) 推荐(0)
摘要：
安装组件 ng g componet 组件名 阅读全文
posted @ 2017-08-10 17:13 work hard work smart 阅读(200) 评论(0) 推荐(0)
摘要：
1.导入 2. 代码 参考：https://stackoverflow.com/questions/35212341/angular2-http-post-request-parameters 阅读全文
posted @ 2017-08-10 17:08 work hard work smart 阅读(2197) 评论(0) 推荐(0)
摘要：
1. 创建工程 ng new demo3 2. 创建子组件 ng g component child 3. 在子组件中定义方法greeting 4. 父组件html（第三行是模板中调用子组件的方法） 5. 父组件Control调用子组件中的方法 阅读全文
posted @ 2017-08-10 17:03 work hard work smart 阅读(1530) 评论(0) 推荐(0)
摘要：
1.组件的生命周期 阅读全文
posted @ 2017-08-10 17:02 work hard work smart 阅读(307) 评论(0) 推荐(0)
摘要：
1.创建工程 ng new demo4 2. 创建子组件 ng g component child 3.子组件html定义 wrapper样式定义 4. 父组件html定义 wrapper样式定义 5.效果图 阅读全文
posted @ 2017-08-10 17:02 work hard work smart 阅读(227) 评论(0) 推荐(0)
摘要：
JS 继承的方式 1.使用call的方式 2. code如下 阅读全文
posted @ 2017-08-06 16:34 work hard work smart 阅读(261) 评论(0) 推荐(0)
摘要：
一、输入属性（父组件与子组件通信） 1. 创建工程 ng new demo1 2.创建order组件 ng g component order 3. 在order组件里定义输入属性 order组件的html 4. 父组件 app.component.ts中定义stock app.component. 阅读全文
posted @ 2017-07-30 15:15 work hard work smart 阅读(1327) 评论(0) 推荐(0)
摘要：
一、date管道 1.html 2. 控制器中的定义brithday 3.效果图 如果时间格式 为： 则效果： 二、数字管道 pi定义 三、自定义管道 1.创建管道 ng g pipe pipe/multiple 2. 管道定义 3. 管道使用 4.效果 其中size的定义为2，最终结果为2×2 阅读全文
posted @ 2017-07-29 21:57 work hard work smart 阅读(1477) 评论(0) 推荐(0)
浙公网安备 33010602011771号