美文网首页
angular常用

angular常用

作者: hahajj_2e72 | 来源:发表于2020-01-22 16:06 被阅读0次

    ng build --prod --aot 打包
    import * as xxx from ‘xxx’: 会将 若干export导出的内容组合成一个对象返回;
    import xxx from ‘xxx’:只会导出这个默认的对象作为一个对象,
    TS ?可选参数

    interface IFRequestParam {
        url: string;
        msg?: string;
        config?: any;
        data?: any;
    }
    

    angular中的pipe是用来对输入的数据进行处理,如大小写转换、数值和日期格式化等。
    使用 @Pipe 装饰器定义 Pipe 的 metadata 信息,如 Pipe 的名称 - 即 name
    实现 PipeTransform 接口中定义的 transform 方法

    //父子通訊
    父 子
    @ViewChild('tagInput') 变量类型为子组件类,可以使用子组件的方法等,同时触发钩子
    
    <app-address-detail [address]="currentAddress"></app-address-detail>
    ts代码:
    @Input() address: Address;
    子 父 和vue emit一樣
    @Output()属性装饰器来实现。 实现步骤:首先需要在子组件中定义事件(使用EventEmitter方法),子组件的事件被触发时引发父组件的事件响应
    
    // app.module.ts
    @NgModule({
      ...
      providers: [MyService]
    })
    export class AppModule {}
    
    //my-service.ts
    import { Injectable } from '@angular/core';
    
    @Injectable()
    export class MyService {
      constructor() { }
    }
    
    //angular6+之后只要在service中申明  6之前需要在引用时 providers: [MyService]
    @Injectable({
      providedIn: 'root',
    })
    
     @Inject(MyService )注入//组件调用时使用    @Injectable()可注入//service内部  组件调用时要 @NgModule({providers: [MyService]})    @Injectable({providedIn: 'root',})  //service声明 且调用时不要申明 
    
     
     @Optional()
     @Inject(MyService )
     @Optional 表示可有可无, 如果没有使用 Optional, 在没有provider 而尝试注入 service 的情况下, angular 是会报错的哦.//@Inject(MyService )注入时使用
    

    HostListener - 声明一个主机监听器。当主机元素发出指定的事件时,角色将调用装饰的方法。 # HostListener -将听取主元素,@HostListener声明发出该事件。

    HostBinding -声明主机属性binding.Angular在更改检测期间自动检查主机属性绑定。如果绑定发生变化,它将更新指令的主机元素。 # HostBinding -将绑定属性Host元素,如果有约束力的变化,HostBinding将更新主机元素。

    @Component({ changeDetection: ChangeDetectionStrategy.OnPush}), 监听change策略

    @HostListener('mouseleave') 
    mouseleave() {
       this.backgroundColor = 'white'; 
     }
    

    https://juejin.im/post/597fe587518825563e037bd3(简介)

    https://www.jianshu.com/p/fc96f60e5745(详解!)

    Reactive Extensions for JavaScript基于可观测数据流在异步编程应用中的库

    响应式编程(RP —— Reactive Programming)

    响应式编程是一种面向数据流和变化传播的编程范式。在编程语言中很方便地表达静态或动态的数据流,而相关的计算模型会自动将变化的值通过数据流进行传播。—— wikipedia

    响应式编程是使用异步数据流进行编程。常见的异步数据流包含Event buses。用包含这些事件在内的任何东西创建数据流(Data stream),监听他并作出响应。

    只关注业务逻辑互相依赖的事件而不是实现细节

    适用于大量和数据有关的事件交互,特别是高实时性要求

    Functional Programming 基本观念

    Functional Programming 是一种编程范式(programming paradigm),就像 Object-oriented Programming(OOP)一样,就是一种写程式的方法论,这些方法论告诉我们如何思考及解决问题。

    我们可以写成

    const add = (a, b) => a + b
    const mul = (a, b) => a * b
    const sub = (a, b) => a - b
    sub(add(5, 6), mul(1, 3))
    

    我们把每个运算包成一个个不同的 function,并用这些 function 组合出我们要的结果,这就是最简单的 Functional Programming。
    函数风格的编程特点:
    第一等公民是函数
    带有闭包的Lambdas/Anonymous函数
    不变性,大部分无态处理,没有状态和变量
    高并发
    无副作用的调用
    通过tail call实现递归的性能优化。
    模式匹配(Haskell, Erlang)
    懒赋值(Miranda, Haskell)
    Homoiconicity(类似LISP)

    Iterator(迭代器) 跟 Observer(观察者) 两个 Pattern模式,这两个 Pattern 都是渐进式的取得元素,差异在于 Observer 是靠生产者推送资料,Iterator 则是消费者去要求资料,而 Observable 就是这两个思想的结合

    //Iterator Pattern
    class IteratorFromArray {
        constructor(arr) {
            this._array = arr;
            this._cursor = 0;
        }
    
        next() {
            return this._cursor < this._array.length ?
            { value: this._array[this._cursor++], done: false } :
            { done: true };
        }
    
        map(callback) {
            const iterator = new IteratorFromArray(this._array);
            return {
                next: () => {
                    const { done, value } = iterator.next();
                    return {
                        done: done,
                        value: done ? undefined : callback(value)
                    }
                }
            }
        }
    }
    
    var iterator = new IteratorFromArray([1,2,3]);
    var newIterator = iterator.map(value => value + 3);
    
    newIterator.next();
    // { value: 4, done: false }
    newIterator.next();
    // { value: 5, done: false }
    newIterator.next();
    // { value: 6, done: false }
    

    相关文章

      网友评论

          本文标题:angular常用

          本文链接:https://www.haomeiwen.com/subject/aozuzctx.html