Angular 学习笔记:
生命周期钩子:
共享模块
共享模块作用:
有些模块可能需要在多个模块中使用,在每个组件中定义会是的程序重复代码过多,不利于维护,出现这样的情况,可以将这些组件提取在同一个ShareModule里面中:
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 { }
如上所示:
管道
AwesomePipe
指令
HighlightDirective
都需要在多个模块中使用,我们可以将其放置在同一个共享模块中,然后将共享模块导入到所要使用这些模块的组件里面,便可以使用这些组件
模块共享注意点:
不要在共享模块中把应用级单例添加到providers
中。 否则如果一个惰性加载模块导入了此共享模块,就会导致它自己也生成一份此服务的实例。
核心模块
核心模块作用:
将系统首次启动需要加载且只加载一次的模块抽取出来,定义到一起形成一个独立的模块,类似共享模块,与其区别在与共享模块可以导入多次,但是核心模块全应用只能导入一次,否则会导致,单一应用实例被赋予新的值,比如service
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 {
}
如以上代码所示:
组件
TitleComponent
服务
UserService
均需要在系统初始化时完成导入,而且只导入一次,属于全局单例,可以放置在核心模块中,在AppModule中进行导入;
共享模块与核心模块总结:
共享模块的作用无非代码的复用与模块化,核心模块为使得启动类看起来整洁,美观,将核心的一次导入的全局单例模块放置在一个module中便于管理隐藏关键信息;
参见:
angular官网: https://angular.cn/docs/ts/latest/guide/ngmodule.html#!#shared-module
网友评论