您的位置:首页 > 编程学习 > > 正文

angular快速创建模块指令(详解Angular项目中共享模块的实现)

更多 时间:2022-01-26 01:52:56 类别:编程学习 浏览量:1931

angular快速创建模块指令

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

一、共享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>
      <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的资料请关注开心学习网其它相关文章!

    您可能感兴趣