详解Angular项目中共享模块的实现

目录
  • 一、共享CommonModule
  • 二、共享MaterialModule
  • 三、共享ConfirmDialog

一、共享CommonModule

创建share Modele:ng g m share

import进来所有需要共享的模块都export出去,

暂时只有CommonModule,以后会有一些需要共享的组件。

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

@NgModule({
  imports: [
    CommonModule
  ],
  exports:[
    CommonModule
  ],
  declarations: []
})
export class SharedModule { }

在app Module中把core Module导入进来。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import {CoreModule} from './core/core.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    CoreModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

二、共享MaterialModule

为了方便管理,把Material相关组件的导入导出单独放在一个Moduel中,在ShareModule中导入导出即可。

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatToolbarModule, MatSidenavModule, MatButtonModule, MatCardModule, MatInputModule, MatListModule, MatSlideToggleModule, MatGridListModule, MatDialogModule, MatAutocompleteModule, MatMenuModule, MatCheckboxModule, MatTooltipModule, MatDatepickerModule, MatRadioModule, MatNativeDateModule, MatSelectModule } from '@angular/material';
import { MatIconModule } from '@angular/material';

const module=[
  MatSidenavModule,
  MatIconModule,
  MatToolbarModule,
  MatIconModule,
  MatButtonModule,
  MatCardModule,
  MatInputModule,
  MatListModule,
  MatSlideToggleModule,
  MatGridListModule,
  MatDialogModule,
  MatAutocompleteModule,
  MatMenuModule,
  MatCheckboxModule,
  MatTooltipModule,
  MatDatepickerModule,
  MatRadioModule,
  MatNativeDateModule,
  MatSelectModule
];

@NgModule({
  declarations: [],
  imports: [
    module
  ],
  exports:[
    module
  ]
})
export class MaterialModule { }
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MaterialModule } from '../material/material.module';
import { ConfirmDialogComponent } from './confirm-dialog/confirm-dialog.component';

@NgModule({
  imports: [
    CommonModule,
    MaterialModule
  ],
  exports:[
    CommonModule,
    MaterialModule
  ],
  declarations: [ConfirmDialogComponent]
})
export class SharedModule { }

三、共享ConfirmDialog

确认对话框不管是在删除任务还是在删除项目中都会用到,所以放在sharedModule中。

$ ng g c shared/confirm-dialog

也可以通过ng g c shared/confirm-dialog -it -is建一个内联的template和style

<form>
  <h2 md-dialog-title>{{title}}</h2>
  <div mat-dialog-content>
    {{content}}
  </div>
  <div mat-dialog-actions>
    <button type="button" mat-raised-button color="primary" (click)="onClick(true)">确定</button>
    <button type="button" mat-button mat-dialog-close  (click)="onClick(false)">取消</button>
  </div>
</form>
import { Component, OnInit, Inject } from "@angular/core";
import { MatDialogRef } from "@angular/material";
import { MAT_DIALOG_DATA } from "@angular/material";

@Component({
  selector: "app-confirm-dialog",
  templateUrl: "./confirm-dialog.component.html",
  styleUrls: ["./confirm-dialog.component.scss"]
})
export class ConfirmDialogComponent implements OnInit {
  title = "";
  content = "";
  constructor(
    private dialogRef: MatDialogRef<ConfirmDialogComponent>,
    @Inject(MAT_DIALOG_DATA) private data
  ) { }

  ngOnInit() {
    this.title = this.data.title;
    this.content = this.data.content;
  }
  onClick(result: boolean) {
    this.dialogRef.close(result);
  }
}

然后把ConfirmDialogComponent组件放在sharedModule中。

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { MaterialModule } from "../material/material.module";
import { ConfirmDialogComponent } from "./confirm-dialog/confirm-dialog.component";

@NgModule({
  imports: [CommonModule, MaterialModule],
  exports: [CommonModule, MaterialModule],
  declarations: [ConfirmDialogComponent],
  entryComponents: [ConfirmDialogComponent]
})
export class SharedModule { }

如果使用ConfirmDialog,可参考删除project。

以上就是详解Angular项目中共享模块的实现的详细内容,更多关于Angular的资料请关注我们其它相关文章!

(0)

相关推荐

  • angular2 NgModel模块的具体使用方法

    angular2 NgModel 模块 在Angular2中一个Module指的是使用@NgModule修饰的class.@NgModule利用一个元数据对象来告诉Angular如何去编译和运行代码.一个模块内部可以包含组件.指令.管道,并且可以将它们的访问权限声明为公有,以使外部模块的组件可以访问和使用到它们.我们也可以通过定义子模块来扩展我们应用的功能. NgModule 的API interface NgModule { // providers: 这个选项是一个数组,需要我们列出我们这个

  • angular2模块和共享模块详解

    创建模块,用到了共享模块PostSharedModule,共享模块里面包含了2个公用的模块:文章管理模块和评论管理模块 1,创建一个模块testmodule.module.ts import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { RouterModule } from "@angular/router"; import { <span

  • 详解使用路由延迟加载 Angular 模块

    Angular 非常模块化,模块化的一个非常有用的特性就是模块作为延迟加载点.延迟加载意味着可以在后台加载一个模块和其包含的所有组件等资源.这样 Angular 就不需要在第一个界面从服务器下载所有的文件,直到您请求它,才下载相应的模块.这对提供性能和减少首屏的初始下载文件尺寸有巨大的帮助.而且它可以很容易设置. 这里将使用一个简单示例来演示这个特性是如何工作的.将应用拆分为多个不同的模块,可以在需要的时候再进行延迟加载. 延迟加载的路由需要在根模块之外定义,所以,你需要将需要延迟加载的功能包含

  • 详解Angular结构型指令模块和样式

    一,结构型指令 *是一个语法糖,<a *ngIf="user.login">退出</a>相当于 <ng-template [ngIf]="user.login"> <a>退出</a> </ng-template> 避免了写ng-template. <ng-template [ngIf]="item.reminder"> <mat-icon > alar

  • 浅谈Angular2 模块懒加载的方法

    当项目变得复杂庞大以后,如果所有页面都在一个模块里,就会出现首页加载慢的问题,因为首页就已经把整个项目加载进来了.所以,很有必要根据业务将不同的功能分模块,以便Angular2按需加载,提升用户体验. 下面的例子是将首页放到home模块里,访问/home时加载home模块内容,仅供学习懒加载,其实首页访问路径应该是/ 先看项目文件结构: home模块放到src/app/home目录下,里面的home目录是home组件. home模块有单独的定义和路由(home.module.ts,home-ro

  • Angular实现预加载延迟模块的示例

    在使用路由延迟加载中,我们介绍了如何使用模块来拆分应用,在访问到这个模块的时候, Angular 加载这个模块.但这需要一点时间.在用户第一次点击的时候,会有一点延迟. 我们可以通过预加载路由来修复这个问题.路由可以在用户与其它部分交互的时候,异步加载延迟的模块.这可以使用户在访问延迟模块的时候更快地访问. 本文将在上一个示例的基础上,增加预加载的功能. 在上一节中,我们的根路由定义在 main.routing.ts,我们在 app.module.ts 中使用了根路由定义. 需要注意的是,Hom

  • Angular 多模块项目构建过程

    引言 两个月前,已存在录题系统,需要构建出题系统,且两套系统存在公用的实体.组件以及服务,如何在构建新系统的同时复用原系统的代码成为了项目难点. 当时的解决方案是将两个系统放在一个应用里,并为该应用配置两套构建方案,当进行 ng serve 或 ng build 时,加载相应配置,动态构建出两套系统,从而解决了共享代码的问题. 现在再去看 Angular ,理解又不同了. 新的思想与理解都源于后端的思考,在构建后端项目时,为了实现代码复用,会构建多模块. 就像下图所示一样,通用的代码放在 Cor

  • 详解Angular项目中共享模块的实现

    目录 一.共享CommonModule 二.共享MaterialModule 三.共享ConfirmDialog 一.共享CommonModule 创建share Modele:ng g m share import进来所有需要共享的模块都export出去, 暂时只有CommonModule,以后会有一些需要共享的组件. import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'

  • 详解eclipse项目中.classpath文件的使用

    1 前言 在使用eclipse或者myeclipse进行java项目开发的时候,每个project(工程)下面都会有一个.classpath文件,那么这个文件究竟有什么作用? 2 作用 .classpath文件用于记录项目编译环境的所有信息,包括:源文件路径.编译后class文件存放路径.依赖的jar包路径.运行的容器信息.依赖的外部project等信息.如果把该文件删除,则eclipse不能讲该工程识别为一个正常的java工程,仅仅当做普通的文件夹而导致不能正常运行. 3 .classpath

  • 详解eclipse项目中的.classpath文件原理

    目录 1 前言 2 作用 3 .classpath内容 3.1 kind="src" 3.2 kind="output" 3.3 kind="con" 3.3.1 JRE配置 3.3.2 Server Runtime配置 3.3.3 Web App Libraries配置 3.3.4 User Library配置 3.4 kind="lib" 3.5 顺序 1 前言 在使用eclipse或者myeclipse进行java项目开

  • 详解vue-cli项目中的proxyTable跨域问题小结

    什么是跨域? 同源策略规定了如果两个 url 的协议.域名.端口中有任何一个不等,就认定它们跨源了. 跨域的解决方式有哪几种? 1.JSONP 是 JSON with padding(填充式 JSON 或参数式 JSON)的简写. JSONP实现跨域请求的原理简单的说,就是动态创建<script>标签,然后利用<script>的src 不受同源策略约束来跨域获取数据. JSONP 由两部分组成:回调函数和数据.回调函数是当响应到来时应该在页面中调用的函数.回调函数的名字一般是在请求

  • 详解VUE项目中安装和使用vant组件

    Vant 是有赞前端团队基于有赞统一的规范实现的 Vue 组件库,提供了一整套 UI 基础组件和业务组件. 特性 50+ 个经过有赞线上业务检验的组件 单元测试覆盖率超过 90% 完善的中英文文档和示例 支持babel-plugin-import 支持 TypeScript 支持 SSR 组件中文文档地址:https://youzan.github.io/vant/#/zh-CN/intro 1.创建VUE项目之后进入项目目录运行安装命令: npm i vant -S 2.安装 babel-pl

  • 详解Vue项目中实现锚点定位

    背景 今天在开发限时练-提分加项目的时候,有一个需要锚点定位的需求,而在Vue项目中,使用传统的在a标签的href属性中写id的方法无效,会导致浏览器的地址改变从而跳转到其他页面. 解决 最终参考vue2.0中怎么做锚点定位改问题下的回答实现了效果. <template> <div class="score-preview-container"> <div class="content-box"> <div class=&q

  • 详解Angular开发中的登陆与身份验证

    前言 由于 Angular 是单页应用,会在一开始,就把大部分的资源加载到浏览器中,所以就更需要注意验证的时机,并保证只有通过了验证的用户才能看到对应的界面. 本篇文章中的身份验证,指的是如何确定用户是否已经登陆,并确保在每次与服务器的通信中,都能够满足服务器的验证需求.注意,并不包括对具体是否具有某一个权限的判断. 对于登陆,主要是接受用户的用户名密码输入,提交到服务器进行验证,处理验证响应,在浏览器端构建身份验证数据. 实现身份验证的两种方式 目前,实现身份验证的方法,主要有两个大类: Co

  • 详解vue项目中调用百度地图API使用方法

    步骤一:申请百度地图密钥: JavaScript API v1.4以及以前的版本无序申请秘钥(ak),自v1.5版本开始需要先申请秘钥(ak),才可以使用,如需获取更高的配额,需要申请  认证企业用户.百度地图API 链接地址:http://lbsyun.baidu.com/apiconsole/key 步骤二:在index.html中添加百度地图JavaScript API接口: <script src="http://api.map.baidu.com/api?v=1.4"

  • 详解Angular Forms中自定义ngModel绑定值的方式

    在 Angular 应用中,我们有两种方式来实现表单绑定--"模板驱动表单"与"响应式表单".这两种方式通常能够很好的处理大部分的情况,但是对于一些特殊的表单控件,例如 input[type=datetime] . input[type=file] ,我们需要重写默认的表单绑定方式,让我们绑定的变量不再仅仅只是一个字符串,而是一个 Date 或者 File 对象.为了达成这一目的,我们需要自定义表单控件的 ControlValueAccessor . Control

随机推荐