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,但年龄的流应该是一个BehaviorSubjectAfterContentinit 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 ContentChildrenngzone,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.htmldefer()
参考: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上发出的所有制