美文网首页
【angular】NgModule学习

【angular】NgModule学习

作者: 前端菜篮子 | 来源:发表于2020-03-05 16:55 被阅读0次

    NgModule参考手册

    选项说明
    providers:在当前模块的注入器中可用的一组可注入对象。@Component中也有该配置项,且更常见@NgModule中的providers不常见,一般用于根模块app.module
    declarations :属于该模块的一组组件、指令和管道(统称可声明对象)。
    imports:这里列出的 NgModule 所导出的可声明对象可用在当前模块内的模板中。
    exports:此 NgModule 中声明的一组组件、指令和管道可以在导入了本模块的模块下任何组件的模板中使用。 导出的这些可声明对象就是该模块的公共 API。
    entryComponents : 定义此 NgModule 中要编译的组件集,这样它们才可以动态加载到视图中。
    bootstrap : 应用的主视图,一般就是指根组件。它是应用中所有其它视图的宿主。即只有根模块app.module才应该设置这个 bootstrap: [AppComponent] 属性。所以不要纠结什么时候应该用bootstrap,除了根组件,其他组件一般不用吧。
    schemas :模块中含 不属于Angular的组件或者指令的元素或者属性则启用该配置项,允许设置的值有①NO_ERRORS_SCHEMA: 当前模板中存在未知选择器时它不会显示错误CUSTOM_ELEMENTS_SCHEMA: 当前模板中可以使用任何类型的自定义元素
    id :当前 NgModule 在 getModuleFactory中的名字或唯一标识符。 如果为 undefined,则该模块不会被注册进 getModuleFactory 中。
    jit: 如果为 true,则该模块将会被 AOT 编译器忽略,因此始终会使用 JIT 编译。
    对比图

    A. 可声明对象 declarations

    在模板中可用的选择器selector包括那些直接声明在这里的可声明对象和导入的那些 NgModule 中所导出的可声明对象。

    可声明对象必须属于也只能属于一个模块。 如果你尝试把同一个类声明在多个模块中,那么编译器就会报错。 要注意不能声明那些从其它模块中导入的类

    B. 入口组件 entryComponents

    Angular使用entryComponents来启用树震动只编译项目中实际使用的组件,而不是编译所有在ngModule中声明但从未使用的组件

    这是用ViewContainerRef.createComponent( )添加的动态添加的组件。将它们添加到entryComponents告诉脱机模板编译器编译它们并为它们创建工厂。

    Angular会自动将以下类型的组件添加到模块的entryComponents中:
    @ NgModule.bootstrap列表中的组件,如动态加载AppComponent
    ② 路由器配置中引用的组件,因为router-outlet也使用ViewContainerRef.createComponent( )将路由组件添加到DOM。。

    离线模板编译器OTC只生成实际使用的组件。如果组件不直接用于模板,OTC不知道是否需要编译。有了entryComponents,你可以告诉OTC也编译这些组件,以便在运行时可用。 如一个列表页中点击新增按钮时,弹出的表单组件,它不在路由中,需要显示写在entryComponents

    D. 路由配置中的imports&exports

    从根模块到具体页面模块

    导出具有传递性。ModuleA 可以导入 ModuleB 并将其导出,这会让所有 ModuleB 中的导出同样可用在导入了 ModuleA 的那些模块中。

    angular中的NgModule是否类似java中的package呢?

    具体页面模块

    通过导出的传递性,将第三方组件模块引入到具体的页面模块

    第三方组件引入

    E. 注入器Injector & 提供商Provider

    参考文章: Angular的依赖注入
    本节简单地介绍下服务的注入与使用,很多细节部分参看原文

    Angular系统中通过在类上添加@Injectable装饰器来告诉系统这个类(服务)是可注入的。当然了这仅仅只是告诉Angular系统这个类(服务)类是可注入的。但是这个服务可以在哪里使用,由谁提供,就得靠注入器和提供商来一起确定了。

    @Injectable 注入方式有哪些?

    (一)providedIn方式:对应三个值:Type<any>rootnull

    • null:若想使用需要在NgModule装饰器或者Component装饰器里面的元数据providers中指定。
    • root:代表顶级AppModule。表明当前服务可以在整个Angular应用里面使用。且在整个Angular应用只有一个服务实例。
    • NgModule:通过providedIn指定一个NgModule。让当前服务只能在该指定NgModule里使用。这种方式有个特别要特别注意的地方:如下的写法是不对的
    import { Injectable } from '@angular/core';
    import {NgmoduleProvidersModule} from './ngmodule-providers.module';
    
    @Injectable({
      providedIn: NgmoduleProvidersModule
    })
    export class NgmoduleProviderInModuleService {
    
      constructor() { }
    }
    

    编译的时候会抛出一个警告信息,编译不过。具体怎么写,也请看原文吧。

    (二)Component(组件)级注入器

    injectable&provider

    本人自己看的angular工程案例中,使用第二种方式的居多(即装饰器@Component中的providers比较常见;@NgModule中providers就在app.module中见过);

    app.module

    关于provider的详细介绍也请参看原文,本人还未深入学习,后期有机会深入使用的话,再认真看看。暂时先会简单的使用!!!

    @NgModule了解一点喽,后面再看看其他装饰器: Angular装饰器介绍

    相关文章

      网友评论

          本文标题:【angular】NgModule学习

          本文链接:https://www.haomeiwen.com/subject/srbtrhtx.html