Angular: /@angular/core （v12.2.4）- part 1

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<readonly (() => Observable<unknown> | Promise<unknown> | void)[]>;

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

import { APP_INITIALIZER } from '@angular/core';   

function initializeApp(): Promise<any> {
     return new Promise((resolve, reject) => {
       // Do some asynchronous stuff
       resolve();
     });
}
 
@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<C>(
    componentOrFactory: ComponentFactory<C> | Type<C>, 
    rootSelectorOrNode?: string | any
): ComponentRef<C>;

        结合class Compiler 使用 :

import { HomeComponent } from './modules/home/home.component';
import { HomeModule } from './modules/home/home.module';


// ...

constructor(
    private appRef: ApplicationRef,
    private compiler: Compiler,
    private injector: Injector
  ) {
    this.getComponentFactory(HomeModule, HomeComponent).then(cfactory = > {
        // 这里就把组件挂在到了响应的位置。
        let compRef = this.appRef.bootstrap(
                        cfactory, 
                        document.getElementById('wrap')
        );
        // 
    });
}

getComponentFactory(ngModule, ngComponent) {
    return new Promise((resolve, reject) => {
      try {
        this.compiler.compileModuleAsync(ngModule).then(ngModuleFactory => { 
          // 这三步是根据类型文件，一步一步找到的，为了得到一个componentFactory
          let 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 

<app-abc title="Hello"></app-abc>

@Component(...)
class AbcComponent {
   constructor(
    @Attribute('title') 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<T> {
    abstract get moduleType(): Type<T>;
    abstract create(parentInjector: Injector | null): NgModuleRef<T>;
}

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<any>
): ComponentRef<C>;

class ComponentFactoryResolver

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

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

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<T = any> {

        nativeElement: T;

}