Angular学习问题笔记 (2020.6.17)

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修饰方法。会使这个方法变成抽象方法,也就是只有声明而没有实现,需要子类继承实现(覆盖)。      

相关文章

ANGULAR.JS:NG-SELECTANDNG-OPTIONSPS:其实看英文文档比看中...
AngularJS中使用Chart.js制折线图与饼图实例  Chart.js 是...
IE浏览器兼容性后续前言 继续尝试解决IE浏览器兼容性问题,...
Angular实现下拉菜单多选写这篇文章时,引用文章地址如下:h...
在AngularJS应用中集成科大讯飞语音输入功能前言 根据项目...
Angular数据更新不及时问题探讨前言 在修复控制角标正确变...