angular快速创建模块指令(详解Angular项目中共享模块的实现)
类别:编程学习 浏览量:1931
时间:2022-01-26 01:52:56 angular快速创建模块指令
详解Angular项目中共享模块的实现目录
- 一、共享CommonModule
- 二、共享MaterialModule
- 三、共享ConfirmDialog
创建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 { }
为了方便管理,把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 { }
确认对话框不管是在删除任务还是在删除项目中都会用到,所以放在sharedModule中。
$ ng g c shared/confirm-dialog
也可以通过ng g c shared/confirm-dialog -it -is建一个内联的template和style
<form> <h2 md-dialog-title>{{title}}</h2> <li mat-dialog-content> {{content}} </li> <li 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> </li> </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的资料请关注开心学习网其它相关文章!
您可能感兴趣
- angular怎么创建声明(使用Angular CDK实现一个Service弹出Toast组件功能)
- angular引入组件库(详解Angular组件之中间人模式)
- angular封装公共组件(详解Angular组件之生命周期二)
- angular组件化(详解Angular父子组件通讯)
- angular兄弟组件调用方法(Angular封装WangEditor富文本组件的方法)
- angular快速创建模块指令(详解Angular项目中共享模块的实现)
- angular怎么把组件用在根组件里(详解Angular组件之投影)
- angularjs过滤器
- angular封装进度条组件(如何用DevUI搭建自己的Angular组件库)
- angular定义一个管道(Angular管道PIPE的介绍与使用方法)
- vue react和angular(详解React Angular Vue三大前端技术)
- angularjs数据绑定类指令及作用(详解Angular数据绑定及其实现方式)
- angular开发详解(详解Angular组件生命周期一)
- angular使用方法(Angular环境搭建及简单体验小结)
- angular教程第九讲(浅谈Angular的12个经典问题)
- angular模块的组成(详解Angular结构型指令模块和样式)
- 会 吃人 的客机 从天堂到地狱只需5分钟,图-104如何做到(会吃人的客机)
- 男人犯的错,为什么要女人来承担(为什么要女人来承担)
- 心理学 四个金蟾,哪个最招财 测你今生的运势有多棒(心理学四个金蟾)
- 吉善缘《聚宝金蟾》金蟾招财摆件 三足全铜蟾蜍客厅店铺开业礼品(吉善缘聚宝金蟾金蟾招财摆件)
- 招财化煞神兽,金蟾变了(招财化煞神兽金蟾变了)
- 26岁杨紫的白素贞遇上24岁鞠婧祎,哪个最美(26岁杨紫的白素贞遇上24岁鞠婧祎)
热门推荐
- mongodb objectid类型
- python关于微信的模块(python基于itchat模块实现微信防撤回)
- vue2和vue3都如何创建项目(vue3.0+vite2实现动态异步组件懒加载)
- requests使用自定义cookie(Yii框架中用response保存cookie,用request读取cookie的原理解析)
- canvas怎么获取内容(详解canvas.toDataURL报错的解决方案全都在这了)
- sqlserver如何查找值为null的数据(SQL Server中NULL的正确使用与空间占用)
- python代码如何进行切片索引(Python读取Pickle文件信息并计算与当前时间间隔的方法分析)
- 使用vue-cli构建electron项目(MAC+PyCharm+Flask+Vue.js搭建系统)
- python验证码处理教程(python简单验证码识别的实现方法)
- angularjs使用指令(详解Angular路由动画及高阶动画函数)