angular4学习记录 -- 数据绑定、响应式编程、管道

Alliot 发布于2019-08-21 16:45 / 2897人阅读

摘要：我们通过装饰器告诉这是一个管道。这个装饰器允许我们定义管道的名字，这个名字会被用在模板表达式中。非纯管道速度超慢，深度检测，会频繁检测。

angular4 数据绑定、响应式编程、管道 数据绑定

基本Html属性绑定

    Something

css类绑定

     something
     something
     something

样式绑定

4.双向绑定

{{name}}

响应式编程

响应式编程其实就是异步数据流编程观察者模式与Rxjs
可观察对象Observable(stream,数据生产者,可观察对象,被观察者):表示一组值或者事件的集合.
在可观察对象发射数据(流)并经过操作符操作后,接着就可以通过订阅(subscribe)这个数据(流)然后激活之前注册的Observable(观察者,一组回调的集合)的回调函数拿到最终结果(完成观察者对可观察对象的订阅)
订阅Subscription:表示一个可观察对象,主要用于取消订阅

具体实例实现：

constructor(){
    Observable.from([1,2,3,4])
        .filter( e => e%2 == 0)
        .map( e => e*e )
        .subscribe(
            e => console.log(e)
        )
}


// debounce是空闲时间的间隔控制

管道

管道是一个带有“管道元数据(pipe metadata)”装饰器的类。

这个管道类实现了PipeTransform接口的transform方法，该方法接受一个输入值和一些可选参数，并返回转换后的值。

当每个输入值被传给transform方法时，还会带上另一个参数，比如我们这个管道中的exponent(放大指数)。

我们通过@Pipe装饰器告诉Angular：这是一个管道。该装饰器是从Angular的core库中引入的。

这个@Pipe装饰器允许我们定义管道的名字，这个名字会被用在模板表达式中。它必须是一个有效的JavaScript标识符。比如，我们这个管道的名字是exponentialStrength。

普通使用：

The hero"s birthday is {{ birthday | date }}
// birthday | date 部分的date就是一个实例管道

链式管道使用

The chained hero"s birthday is
{{ birthday | date | uppercase}}
//链式管道就是在变量后面链接多个pipe

传递参数

{{ birthday | date: *FullDate* }}

自定义管道

@Pipe({name: "exponentialStrength"})
export class ExponentialStrengthPipe implements PipeTransform {
  transform(value: number, exponent: string): number {
    let exp = parseFloat(exponent);
    return Math.pow(value, isNaN(exp) ? 1 : exp);
  }
}

纯管道

值变化或者对象引用发生变化的时候，才会执行管道。

非纯管道

速度超慢，深度检测，会频繁检测。pure设为false。

GPU云服务器云服务器响应式编程 php响应式编程响应式响应式布局

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88689.html

angular4 学习记录 -- 表单

摘要：在表单上添加的会拦截标准的表单提交事件。并为它们提供了一些共同的行为和属性，其中有些是可观察对象。用于跟踪一个单独的表单控件的值和有效性状态。组件中的顶级表单就是一个。在表单所在的中的上添加，再在指定的验证方法中调用来显示验证失败信息。 angular4 表单模板表单在app.module中导入FormsModule之后，项目中的form表单都会是一个ngForm，也就是一个模板表...

james 2019-08-21 16:45 评论0 收藏0
Angular2 VS Angular4 深度对比：特性、性能

摘要：的特性和性能是的超集，用于帮助的开发。注解提供了连接元数据和功能的工具。通过在库中提供基本信息可以调用函数或创建类的实例来检查相关元数据，从而简化了对象实例的构建。停用它会响应跳出旧控制器的成功事件。 showImg(https://segmentfault.com/img/bVSqTU?w=850&h=460); 在Web应用开发领域，Angular被认为是最好的开源JavaScri...

孙淑建 2019-08-20 18:37 评论0 收藏0
Angular学习随笔

摘要：最近在看，随手记的一些的随笔。新上手或者准备学的可以用作参考，第一次写博客，笔记不算完整，若老司机发现有不足指出请指出。处理当前路由离开的情况。在路由激活之前获取路由数据。最近在看angular4，随手记的一些angular的随笔。新上手或者准备学angular的可以用作参考，第一次写博客，笔记不算完整，若老司机发现有不足指出请指出。技术交流群：513590751 Angular...

jindong 2019-08-20 16:50 评论0 收藏0
Angular学习随笔

摘要：最近在看，随手记的一些的随笔。新上手或者准备学的可以用作参考，第一次写博客，笔记不算完整，若老司机发现有不足指出请指出。处理当前路由离开的情况。在路由激活之前获取路由数据。最近在看angular4，随手记的一些angular的随笔。新上手或者准备学angular的可以用作参考，第一次写博客，笔记不算完整，若老司机发现有不足指出请指出。技术交流群：513590751 Angular...

Batkid 2019-08-20 16:50 评论0 收藏0
【响应式编程的思维艺术】（5）Angular中Rxjs的应用示例

摘要：本文是响应式编程第四章构建完整的应用程序这篇文章的学习笔记。涉及的运算符每隔指定时间将流中的数据以数组形式推送出去。中提供了一种叫做异步管道的模板语法，可以直接在的微语法中使用可观测对象示例五一点建议一定要好好读官方文档。本文是【Rxjs 响应式编程-第四章构建完整的Web应用程序】这篇文章的学习笔记。示例代码托管在：http://www.github.com/dashnoword...

shenhualong 2019-08-26 18:35 评论0 收藏0