Angular2(八)--module化（核心模块与共享模块）

最新推荐文章于 2022-03-01 18:58:16 发布

zfireear

最新推荐文章于 2022-03-01 18:58:16 发布

阅读量5.1k

点赞数

分类专栏： Angualr2

本文链接：https://blog.csdn.net/zfireear/article/details/53455325

版权

Angualr2 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

Ahead-Of-time (AoT)
在main.ts可以设置AppModuleNgFactory（The app module factory produced by the static offline compiler）

（main.ts）
// The app module factory produced by the static offline compiler
import { AppModuleNgFactory } from './app.module.ngfactory';
// Launch with the app module factory.
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

使用@input input binding是在标签后使用[name]来关联,而name相当于一个变量,我们需要为它赋值

Modules are a great way to provide services for all of the module’s components.

NgModel belongs to Angular’s FormsModule
NgModule belongs to Angular’s core

When the two directives compete to color the same element, the directive declared
later wins because its DOM changes overwrite the first.

The root module and the feature module share the same execution context. They share
the same dependency injector which means the services in one module are available to all.

Modules do not inherit access to the components, directives or pipes that are declared
in other modules.

service instances, they rely on Angular dependency injection to do this kind of sharing, not the module system.Do not specify app-wide singleton providers in a shared module. A lazy loaded module that imports that shared module will make its own copy of the service.

shared module for shared component,directive,pips
core module for a single CoreModule that we import once when the app starts and never import anywhere else.

The moduleId: module.id property sets the base for module-relative loading of the templateUrl.

core module示例

import {
  ModuleWithProviders, NgModule,
  Optional, SkipSelf }       from '@angular/core';
import { CommonModule }      from '@angular/common';
import { TitleComponent }    from './title.component';
import { UserService }       from './user.service';
@NgModule({
  imports:      [ CommonModule ],
  declarations: [ TitleComponent ],
  exports:      [ TitleComponent ],
  providers:    [ UserService ]
})
export class CoreModule {
}

shared module 示例:

import { NgModule }            from '@angular/core';
import { CommonModule }        from '@angular/common';
import { FormsModule }         from '@angular/forms';
import { AwesomePipe }         from './awesome.pipe';
import { HighlightDirective }  from './highlight.directive';
@NgModule({
  imports:      [ CommonModule ],
  declarations: [ AwesomePipe, HighlightDirective ],
  exports:      [ AwesomePipe, HighlightDirective,
                  CommonModule, FormsModule ]
})
export class SharedModule { }