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

 

 

exportAs

参考： https://angular.cn/api/core/Directive#exportAs

定义一个名字，用于在模板中把该指令赋值给一个变量。

@Directive({
    selector: 'child-dir',
    exportAs: 'child'
})
class ChildDir {

}

@Component({
    selector: 'main',
    template: ``
})
class MainComponent {
    
}

 

 

 

entryComponents

参考： https://angular.cn/api/core/NgModule#entrycomponents

定义此NgModule中要编译的组件集，这样它们才可以动态加载到视图中。

对于在这里列出的每个组件，Angular都会为其创建一个ComponentFactory，并将其保存到ComponentFactoryResolver中。

Angular会自动把模板的bootstrap(引导模块)和路由定义中引用的组件添加到entryComponents列表中。该选项用于添加那些需要写代码来创建的组件，比如ViewContainerRef.createComponent()

 

 

 

 

EmbeddedViewRef

 

<_T = unknown>

 

$implicit

 

ViewContainerRef