加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

具有根级别导入的Angular2应用程序模块

发布时间:2020-12-17 07:58:03 所属栏目:安全 来源:网络整理
导读:根本级别的导入不应该全局可用(全局我指的是所有子模块和组件)? 我有以下root / app模块: import { BrowserModule } from '@angular/platform-browser';import { NgModule,ApplicationRef } from '@angular/core';import { CommonModule } from '@angular/
根本级别的导入不应该全局可用(全局我指的是所有子模块和组件)?

我有以下root / app模块:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule,ApplicationRef } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';
import { appRouterProviders,routing } from './app.routes';
import { DashboardModule } from './dashboard/dashboard.module';
import { DecisionModule } from './decision/decision.module';
import { MdCoreModule }           from '@angular2-material/core';
import { MdButtonModule }         from '@angular2-material/button';
import { MdCardModule }           from '@angular2-material/card';
import { MdListModule }           from '@angular2-material/list';
import { MdSidenavModule }        from '@angular2-material/sidenav';
import { MdToolbarModule }        from '@angular2-material/toolbar';
import { MdIconModule }           from '@angular2-material/icon';

@NgModule({
  declarations: [
    AppComponent                    
  ],imports: [
    BrowserModule,CommonModule,FormsModule,HttpModule,RouterModule,routing,DashboardModule,MdCoreModule,MdButtonModule,MdCardModule,MdListModule,MdSidenavModule,MdToolbarModule,MdIconModule
  ],providers: [
    appRouterProviders
  ],entryComponents: [ AppComponent ],bootstrap: [ AppComponent ]
})
export class AppModule {

}

如果我尝试在我的子模块中使用它们不显示的材质元素,这就是子模块的样子:

import { NgModule }               from '@angular/core';
import { CommonModule }           from '@angular/common';
import { FormsModule }            from '@angular/forms';
import { dashboardRouting }       from './dashboard.routes';
import { DashboardComponent }     from './dashboard.component';
import { ActionsDialogComponent } from './actions-dialog';

@NgModule({
  imports: [
    CommonModule,dashboardRouting,],declarations: [
    DashboardComponent,ActionsDialogComponent    
  ],providers: [    
  ]
})
export class DashboardModule {}

但是,如果我导入它们显示的子模块中的材料模块.这是材料设计组件工作时子模块的样子:

import { NgModule }               from '@angular/core';
import { CommonModule }           from '@angular/common';
import { FormsModule }            from '@angular/forms';
import { dashboardRouting }       from './dashboard.routes';
import { DashboardComponent }     from './dashboard.component';
import { ActionsDialogComponent } from './actions-dialog';
import { MdCoreModule }           from '@angular2-material/core';
import { MdButtonModule }         from '@angular2-material/button';
import { MdCardModule }           from '@angular2-material/card';
import { MdListModule }           from '@angular2-material/list';
import { MdSidenavModule }        from '@angular2-material/sidenav';
import { MdToolbarModule }        from '@angular2-material/toolbar';
import { MdIconModule }           from '@angular2-material/icon';

@NgModule({
  imports: [
    CommonModule,MdIconModule,providers: [    
  ]
})
export class DashboardModule {}

如果材料模块已经在根级别导入,为什么必须再次在子级别上导入材料模块?

在Angular2中的组件概念中,没有什么比您所指的“根级别”更好. 组件是模块化的部件,非常类似于Java(或任何高级语言)项目中的类 – 您还可以导入您使用的每个类. 它们可以嵌套或互相使用,但仍然每个组件都需要导入自己的依赖项. 请注意,在Angular2中导入是一种非常不同的方法,而不是在Angular 1中包含外部模块/库(然后基本上在index.html中为每个依赖项创建一个新引用). 首先是Angular 2中的那些导入,因为Typescript编译器需要知道组件中使用的是什么(因此增加了一些功能来进行错误检查) 编译和打包的构建应该只包含一次依赖(假设一切都正确配置).

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读