美文网首页
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生命周期

    大纲 1、angular生命周期是什么2、生命周期钩子分类3、Angular 2 指令生命周期钩子的作用及调用顺序...

  • angular中的生命周期

    生命周期 1、Angular每个组件都存在一个生命周期,从创建,变更到销毁。Angular提供组件生命周期钩子,把...

  • angular6.x--生命周期

    按照生命周期执行的先后顺序,Angular生命周期接口如下所示 生命周期顺序简写在Angular通过构造函数创建组...

  • 12.《Angular生命周期》

    一、生命周期钩子 每个组件都有一个被 Angular 管理的生命周期。Angular 创建它,渲染它,创建并渲染它...

  • Angular 2+ 的组件生命周期

    参考资料: angular 2.0 从0到1 -> #Angular 2的组件生命周期

  • angular 钩子

    angular 钩子ngOnInit是 Angular 组件生命周期中的一个钩子,Angular 中的所有钩子和调...

  • Angular2生命周期钩子函数

    Angular每个组件都存在一个生命周期,从创建,变更到销毁。Angular提供组件生命周期钩子,把这些关键时刻暴...

  • Angular2生命周期钩子函数

    Angular每个组件都存在一个生命周期,从创建,变更到销毁。Angular提供组件生命周期钩子,把这些关键时刻暴...

  • Angular更新机制(一):Angular的生命周期

    Angular更新机制(一):Angular的生命周期 了解Angular的更新机制之前,首先需要了解Angula...

  • Angular生命周期解析

    每个组件都有一个被Angular管理的生命周期,Angular提供了生命周期钩子,把这些关键生命时刻暴露出来,赋予...

网友评论

      本文标题:angular生命周期

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