Angular学习问题笔记 (2020.6.17)

2023-10-07 15:57:28

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

码农公寓