Angular:/@angular/core（v12.2.4）part1

1、为组件、视图、变更检测、渲染以及事件处理定义基础方法。

2、定义装饰器。（关于"装饰器"的知识，有空补个demo）

3、定义依赖注入、国际化以及调试等各种基础架构。

@angular/core 

@angular/core/global

@angular/color/testing

ApplicationModule

?

class ApplicationInitStatus

一个反应 APP_INITIALIZER  function 运行状态的类。 

注：下面的内容都是关于 APP_INITIALIZER。

export declare const APP_INITIALIZER: InjectionToken Observable | Promise | void)[]>;

它是一个DI token, 可以用来规定一个或者多个初始化函数。这个函数会在应用启动的时候注入。如果其中一个function返回promise或者observable，在它们complete之前应用初始化不会完成。因此，我们可以用此来创建一个加载语言数据的工厂函数，或者其他配置。

import { APP_INITIALIZER } from &＃39;@angular/core&＃39;; function initializeApp(): Promise {return new Promise((resolve, reject) => {// Do some asynchronous stuffresolve();});
}@NgModule({imports: [BrowserModule],declarations: [AppComponent],bootstrap: [AppComponent],providers: [{provide: APP_INITIALIZER,useFactory: () => initializeApp,multi: true}]
})
export class AppModule {}

class ApplicationRef

        .componentTypes : 只读，一个组件列表，组件创建之前这个列表就已经填充好了。就是配置AppModule的时候，bootstrap的组件。

        .components： 和上面一样的组件，但是这两个的类型不一样。

        .isStable : 是一个observable 

constructor(private appRef: ApplicationRef,private zone: NgZone,private cd: ChangeDetectorRef) {appRef.isStable.pipe(first(stable => {this.isAppStable = stable;return stable;}),switchMap(() => interval(1000)),).subscribe(counter => {if (this.isAppStable === false) {zone.run(() => {});// cd.detectChanges();}});}

        .bootstrap()  将选择器标识的组件挂载到dom上，或者某个特定的dom上。如果没有提供目标dom, angular会找页面已经启动的组件上。`ngDoBootstrap` hook 。 

bootstrap(componentOrFactory: ComponentFactory | Type, rootSelectorOrNode?: string | any
): ComponentRef;

        结合class Compiler 使用 :

import { HomeComponent } from &＃39;./modules/home/home.component&＃39;;
import { HomeModule } from &＃39;./modules/home/home.module&＃39;;// ...constructor(private appRef: ApplicationRef,private compiler: Compiler,private injector: Injector) {this.getComponentFactory(HomeModule, HomeComponent).then(cfactory = > {// 这里就把组件挂在到了响应的位置。let compRef = this.appRef.bootstrap(cfactory, document.getElementById(&＃39;wrap&＃39;));// });
}getComponentFactory(ngModule, ngComponent) {return new Promise((resolve, reject) => {try {this.compiler.compileModuleAsync(ngModule).then(ngModuleFactory => { // 这三步是根据类型文件，一步一步找到的，为了得到一个componentFactorylet ngModuleRef = ngModuleFactory.create(this.injector);let compOnentFactoryResolver= ngModuleRef.componentFactoryResolver;let compOnentFactory= componentFactoryResolver.resolveComponentFactory(ngComponent);//resolve(componentFactory);});} catch(err) {reject();}});}

        .tick()  调用此方法显示地处理变更检测和副作用。在开发模式下，也会进行第二次变更检测循环，以确保没有其他改变；如果在第二次检测中发现了其他改变，angular会跑出错误。

        .attachView(viewRef: ViewRef) 连接视图以便于脏检测。当视图销毁的时候，会自动detached().

        .detachView(viewRef: ViewRef) 和上面那个相反。

        get viewCount(): number; 这个数据，初始值是1，无论一开始加载了多少个组件。应该是会随着attachView改变。

@Attribute 

@Component(...)
class AbcComponent {constructor(@Attribute(&＃39;title&＃39;) private title: string) { console.log(this.title); // Hello}
}

abstract class ChangeDetectorRef

(抽象类：是指不允许被实例化的类)

abstract markForCheck(): void; 当一个view用ChangeDetectionStrategy#OnPush变更检测策略的时候，明确的标记这个view为changed以便于它再次被检测。当输入改变或者事件触发，组件通常被标记为dirty（需要重新渲染）。调用这个方法以确保组件被检测到了，尽管这些触发没有出现。

abstract detach(): void; 将view从变更检测树里面分离出去。就算是dirty，被分离的组件也不会重新检测，除非它再次连上那个树。和 detectChanges() 一起使用，实现本地变更检查。

abstract detectChanges(): void; 检测这个view和他的子组件。

abstract checkNoChanges(): void; 检查更改检测程序及其子程序，如果检测到任何更改，则抛出。在开发模式中使用，以验证运行变更检测不会引入其他变更。

abstract reattach(): void; 与 detach() 相反。

class Compiler 

在运行时候angular编译的底层服务，创建ComponentFactory。它也可用于后续创建和渲染组件实例。

export declare abstract class NgModuleFactory {abstract get moduleType(): Type;abstract create(parentInjector: Injector | null): NgModuleRef;
}

class CompilerFactory

export declare abstract class CompilerFactory {abstract createCompiler(options?: CompilerOptions[]): Compiler;
}

class ComponentFactory

selector :组件的 html选择器

componentType :  factory将创建的组件类型

ngContentSelectors :  组件的所有ng-content元素的选择器

inputs : 组件的inputs

outputs ： 组件的outpus

create：创建一个新的组件

abstract create(injector: Injector, projectableNodes?: any[][], rootSelectorOrNode?: string | any, ngModule?: NgModuleRef
): ComponentRef;


class ComponentFactoryResolver

将component映射到componentFactory类，被用于创建组件的实例。

export declare abstract class ComponentFactoryResolver {static NULL: ComponentFactoryResolver;abstract resolveComponentFactory(component: Type): ComponentFactory;
}

class ComponentRef

location: ElementRef, 组件实例的host/anchor

injector: 组件实例的依赖注入

instance: 组件的实例

hostView: 

changeDetectorRef: 组件实例的变更检测。

componentType: 

destroy(): 销毁组件，以及它相关的数据。

onDestroy(callback: Function): void;  自定义组件的时候，很有用。 

class ElementRef

视图中原生元素的包裹。在浏览器中，通常是一个dom元素。

小心使用 elementRef, 有可能收到xss攻击。

export declare class ElementRef {

        nativeElement: T;

}