angular 4.0注意事项 - Zikzin/Angular.js-study GitHub Wiki

一、如何设置第三方依赖

1、将第三方类库安装到本地，用npm ：如 $ npm install jquery --save

2、将类库引到项目中：angular-cli.json

- "style":["../node_modules/bootstrap/dist/css/bootstrap.css],
- "scripts":[../node_modules/bootstrap/dist/js/bootstrap.js ,  ../node_modules/jquery/dist/jquery.js]

3、将jquery、boostrap的类型文件描述也安装到本地：(保证typescipt能识别JavaScript)

  - npm install @types/jquery --save-dev
  - npm install @types/bootstrap --save-dev

二、命令行

1、 如生成导航栏组件：（angular 4.0核心是组件）

- ng g component navbar
- 该命令会生成四个文件：html、css、ts、spec.ts(用于测试)，并且更新app.module.ts（在declarations可以看到新生成的组件）

三、值绑定

1、插值表达式 {{}}

2、属性绑定:把html的属性跟控制器上的一个属性绑定。 [src]="imgUrl"

- 样式绑定：[class.empty]="star" (star是布尔值，为true时，生效)

3、事件绑定：(click)="toProductDetails()"

四、组件

1、输入属性 @Input()

- 如何将父组件中的数据通过输入属性传递给子组件。

五、路由

  • ng new router --routing

1、在路由时传递数据

  • 在查询参数中传递数据

  • 在路由路径中传递数据

    • 第一步：修改路由配置中的path属性使其可以携带参数
    • 第二步: 修改路由链接的参数来传递数据
    • 第三步：

  • 在路由配置中传递数据

2、重定向路由

3、子路由

  • {path:'home',component:HomeComponent}

  • {path:'home',component:HomeComponent,

    children:[

    {

    path:'',component:XxxComponent,

    },

    {

    path:'/yyy',component:YyyComponent

    }

    ]

    }

4、辅助路由

{path: 'xxx',component: XxxComponent,outlet:'aux'}

{path: 'yyy',component: YyyComponent,outlet:'aux'}

<a [routerLink] = "[ '/home' , {outlets:{aux: 'xxx'}}]"> Xxx

<a [routerLink] = "[ '/product' , {outlets:{aux: 'yyy'}}]"> Yyy

5、路由守卫

  • 使用场景：

    • 只有当用户已经登录并拥有某些权限时才能进入某些路由。
    • 一个由多个表单组件组成的向导，例如注册流程，用户只有在当前路由的组件中填写了满足要求的信息才可以导航到下一个路由。
    • 当用户未执行保存操作而试图离开当前导航时提醒用户。

  • 路由守卫类型：

  • CanActive: 处理导航到某路由的情况。

  • CanDeactivate: 处理从当前路由离开的情况。

  • Resolve: 在路由激活之前获取路由数据。（在进到组件之前，先拿到组件需要的数据，如果拿不到想要的数据，或者数据出错，就跳到比如提示页，就不再进入目标路由。）

五、依赖注入

六、数据绑定

  • ng4中默认的是单向数据绑定，所谓单向指 a、将组件控制器属性的变化反映到模板上，例如1和2。 b、将模板上的事件绑定到组件控制器的方法上。如3。

1、使用插值表达式将一个表达式的值显示在模板上。（插值表达式是dom属性绑定）

  • {{title}}

  • 插值表达式 = 属性绑定

2、使用方括号将html标签的一个属性绑定到一个表达式上。（属性绑定）

  • <img [src] = "imgUrl">

  • html属性与dom属性的区别：

    • `<input value="Tom" (input)="doOnTnput($event)">

      doOnTnput(event:any){

      console.log(event);  // 拿到这个事件的所有属性

console.log(event.target.value);  // dom属性，根据输入框输入内容而改变，指定当前值

console.log(event.target.getAttribute('value')); // 得到html属性，保持不变的，这里就是Tom，指定初始值

      }`

    • <button disable>点击</button>

      • 添加或删除disable的html属性会禁用或启用按钮，但这个html属性的值是无关紧要的，如disable="false"不禁用按钮，都没有用，但是可以通过设置dom属性的disable的值设置。这就是dom属性的价值。

3、使用小括号将组件控制器的一个方法绑定为模板上一个事件的处理器。(事件绑定)

  • <button (click) = "toDetail()">商品详情
  • <button (click) = "save = true">

4、html属性与dom属性的关系

  • （1）少量html属性和 dom属性之间有着1:1的映射，如id。
  • （2）有些html属性没有对应的dom属性，如colspan。
  • （3）有些dom属性没有对应的html属性，如textContent。
  • （4）就算名字相同，html 属性和dom 属性也不是同一样东西。
  • （5）html 属性的值指定了初始值，dom属性的值表示当前值,dom属性的值可以改变，html属性的值不能改变。
  • （6）模板绑定是通过dom属性和事件来工作的，而不是html属性。

5、html属性绑定

  • 基本属性绑定

    <td [attr.colspan]="tableColspan">somthing</td>

  • css类绑定

    <div class="aa bb" [class]="someExpression"></div>

    <div [class.special]="isSpecial"></div>

    <div [ngClass]="{aa:isA,bb:isB}"></div>

  • 样式绑定

    <div [style.color]="isSpecial?'red':'blue'"></div>

    <div [ngStyle]="{'font-style':this.canSave?'italic':'normal'}"></div>

6、双向绑定 [(ngModel)]

  • 常见用于表单处理，用在特殊的表单元素上，用在div span等没用处的。

  • <input [value]="name" (input)="doOnInput($event)">{{name}} // 既要绑定属性，也要绑定事件

  • <input [(ngModel)]="name"> // 用ngModel来绑定

7、管道

  • 常用内置管道：

    • uppercase、lowercase、
    • date:'yyyy-MM-dd HH:mm:ss'、
    • number:'2.1-4'(2，表示小数点前有几位，1表示最小的小数位，4表示最多小数保持几位)
    • async 处理页面上异步的流

  • 自定义管道：ng g pipe pipe/multiple

    • 上面的指令会自动在模块的declarations里（跟组件一样）
    • @pipe({ })

  • 如：将原始值到输出值的改变

    • <p>我的生日是{{birthday | date | uppercase}}</p>
⚠️ **GitHub.com Fallback** ⚠️