Angular学习问题笔记 (2020.6.17)

2020-06-17 16:05:31 阅读：347 来源： 互联网

标签：Observable cn 17 2020.6 abstract js void https Angular

ContentChild 装饰器

参考：https://angular.cn/api/core/ContentChild 配置内容查询的参数装饰器用于从内容DOM中获取与选择器匹配的第一个元素或指令。如果内容DOM发生了改变，并且有一个新的子元素与选择器匹配，那么属性将被更新。在调用ngAfterContentInit回调之前设置内容查询不检索其他组件模板中的元素或指令，因为组件的模板始终是其祖先的黑盒。元数据属性： selector - 用于查询的指令类型或名称 read - True表示从查询的元素读取不同的标记 static - True表示在运行变更检测之前解析查询结果，False表示在变更检测之后解析。默认值为false 使用说明：

import { AfterContentInit, ContentChild, Directive } from '@angular/core';

@Directive({selector: 'child-directive'})
class ChildDirective {

}

@Directive({selector: 'someDir'})
class SomeDir implements AfterContentInit {
    @ContentChild(ChildDirective) contentChild!: ChildDirective;

    ngAfterContentInit() {
        // contentChild is set
    }
}

BehaviorSubject

参考：https://cn.rx.js.org/manual/overview.html#h26 BehaviorSubject是Subject的一个变体，它有一个“当前值”的概念。它保存了发送给消费者的最新值。并且当有新的观察者订阅时，会立即从BehaviorSubject那接收到“当前值” 举例来说，生日的流是一个Subject，但年龄的流应该是一个BehaviorSubject

AfterContentInit AfterViewInit区别

AfterContentInit

参考：https://angular.cn/api/core/AfterContentInit 一个生命周期钩子，它会在Angular完全实例化了指令的所有内容之后调用。定义一个ngAfterContentInit()方法来处理额外的初始化任务。

interface AfterContentInit {
    ngAfterContentInit(): void
}

AfterViewInit

参考：https://angular.cn/api/core/AfterViewInit

一个生命周期钩子，会在Angular完全初始化了组件的视图后调用。定义一个ngAfterViewInit()方法来处理一些额外的初始化任务。

ContentChild ViewChild

Renderer2 基类

参考：https://angular.cn/api/core/Renderer2 扩展此基类以实现自定义渲染器。默认情况下，Angular会把模板渲染成DOM。你可以使用自定义渲染器来拦截渲染类调用，或用于渲染一些非DOM的东西。说明使用RendererFactory2创建你的自定义渲染器。使用自定义渲染器可以绕过Angular的模板机制，并进行无法以声明式语法表达的自定义UI变更。比如，如果你要设置无法静态得知名称的Property或Attribute，可以使用setProperty()或setAttribute()方法。 @HostBinding ChangeDetectorRef ContentChildren

NgZone，onStable

参考：https://angular.cn/api/core/NgZone 一个可注入的服务，用于在Angular区域内部或外部执行工作。

class NgZone {
    static isInAngularZone(): boolean
    static assertInAngularZone(): void
    static assertNotInAngularZone(): void
    constructor(__0)
    hasPendingMacrotasks: boolean
    hasPendingMicrotasks: boolean
    isStable: boolean
    onUnstable: EventEmitter<any>
    onMicrotaskEmpty: EventEmitter<any>
    onStable: EventEmitter<any>
    one rror: EventEmitter<any>
    run
    runTask
    runGuarded
    runOutsideAngular
}

onStable

当最后一个onMicrotaskEmpty运行并且不再有微任务时通知，这意味着我们将放弃VM轮。此事件只被调用一次。

示例代码：

private contentChildrenChanges$: Observable<null> = defer(() => {
        if (this.nzListItemActions) {
            return of(null)
        }
        return this.ngZone.onStable.asObservable().pipe(
            take(1),
            switchMap(() => this.contentChildrenChanges$)
        )
    })

QueryList TemplateRef和ElementRef ViewChild和ViewChildren

Subject 主体

参考：https://cn.rx.js.org/manual/overview.html#subject- 什么是Subject? RxJS Subject是一种特殊类型的Observable，它允许将值多播给多个观察者，所以Subject是多播的，而普通的Observable是单播的（每个已订阅的观察者都拥有Observable的独立执行）。 Subject还像是EventEmitters，维护着多个监听器的注册表。每个Subject都是观察者。Subject是一个有如下方法的对象：next(v) error(e) complete() ChangeDetectorRef 类参考：https://angular.cn/api/core/ChangeDetectorRef Angular各种视图的基础类，提供变更检测功能。变更检测树会收集要检查的所有视图。使用这些方法从树中添加或移除视图、初始化变更检测并显示地把这些视图标记为脏的，意思是它们变了、需要重新渲染。

abstract class ChangeDetectorRef {
    abstract markForCheck(): void
    abstract detach(): void
    abstract detectChanges(): void
    abstract checkNoChanges(): void
    abstract reattach(): void
}

子类 ViewRef

方法：

detectChanges() 检查该视图及其子视图。与detach结合使用可以实现局部变更检测。

abstract detectChanges(): void

asObservable() 查不到资料

参考： https://www.jianshu.com/p/6a5bff3d38fd https://www.cnblogs.com/Answer1215/p/11738664.html

defer()

参考：https://cn.rx.js.org/class/es6/Observable.js~Observable.html#static-method-defer 惰性创建Observable,也就是说，当且仅当它被订阅的时候才创建，并且为每个订阅者创建新的Observable.

defer(() => Observable.of(a, b, c))

switchMap

take takeUntil 过滤操作符

take

参考：https://cn.rx.js.org/class/es6/Observable.js~Observable.html#instance-method-take 只发出源Observable最初发出的N个值（N=count）接收源Observable最初的N个值（N=count），然后完成。

示例：获取时间间隔为1秒的interval Observable的最初5秒

var interval = Rx.Observable.interval(1000);
var five = interval.take(5);
five.subscribe(x => console.log(x));

takeUntil

参考：https://cn.rx.js.org/class/es6/Observable.js~Observable.html#instance-method-takeUntil

发出源Observable发出的值，直到notifier Observable发出值。

它发出源Observable的值，然后直到第二个Observable（即notifier）发出项，它便完成。

takeUntil订阅并开始镜像源Observable，它还监视另外一个Observable，即你提供的notifier.如果notifier发出值或complete通知，那么输出Observable停止镜像源Observable，然后完成。

示例：每秒都发出值，知道第一次点击发生

var interval = Rx.Observable.interval(1000);
var clicks = Rx.Observable.fromEvent(document, 'click');
var result = interval.takeUntil(clicks);
result.subscribe(x => console.log(x));

merge() 和 mergeAll() 组合操作符

merge()

参考：https://cn.rx.js.org/class/es6/Observable.js~Observable.html#instance-method-merge 创建一个输出Observable，它可以同时发出每个给定的输入Observable中的所有值。通过把多个Observables的值混合到一个Observable中来将其打平

mergeAll()

参考：https://cn.rx.js.org/class/es6/Observable.js~Observable.html#instance-method-mergeAll

将高阶Observable转换成一阶Observable，一阶Observable会同时发出在内部Observables上发出的所有制

abstract

1. abstract修饰类。会使这个类成为一个抽象类，这个类将不能生成对象示例，但可以做为对象变量声明的类型，也就是编译时类型。抽象类相当于一类的半成品，需要子类继承并覆盖其中的抽象方法。 2. abstract修饰方法。会使这个方法变成抽象方法，也就是只有声明而没有实现，需要子类继承实现（覆盖）。

标签：Observable,cn,17,2020.6,abstract,js,void,https,Angular
来源： https://www.cnblogs.com/cathy1024/p/13152892.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9