美文网首页
angular生命周期

angular生命周期

作者: 宸雨 | 来源:发表于2017-10-23 14:21 被阅读85次

    Angular 学习笔记:

    生命周期钩子:

    angularJS声明周期钩子示意图.png
    共享模块

    共享模块作用:

    有些模块可能需要在多个模块中使用,在每个组件中定义会是的程序重复代码过多,不利于维护,出现这样的情况,可以将这些组件提取在同一个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

    相关文章

      网友评论

          本文标题:angular生命周期

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