Material使用11 核心模塊和共享模塊、 如何使用@angular/material

1 創建項目

　　1.1 版本說明

　　　　

　　　　

　　1.2 創建模塊

　　　　1.2.1 核心模塊

　　　　　　該模塊只加載一次，主要存放一些核心的組件及服務

　　　　　　ng g m core

　　　　　　1.2.1.1 創建一些核心組件

　　　　　　　　頁眉組件：header

　　　　　　　　　　ng g c core/header --module core

　　　　　　　　內容組件：main

　　　　　　　　　　ng g c core/main --module core

　　　　　　　　頁腳組件：footer

　　　　　　　　　　ng g c core/footer --module core

　　　　　　1.2.1.2 如何讓核心模塊只加載一次

　　　　　　　　在核心模塊對應類中的構造器中增添如下代碼

  constructor( @Optional() @SkipSelf() parent: CoreModule) {
    if (parent) {
      throw new Error('核心模塊已經加載了，請勿重復加載');
    }
  }

import { NgModule,  SkipSelf, Optional } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HeaderComponent } from './header/header.component';
import { MainComponent } from './main/main.component';
import { FooterComponent } from './footer/footer.component';


@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [
    HeaderComponent,
    MainComponent,
    FooterComponent
  ],
  exports: [
    HeaderComponent,
    MainComponent,
    FooterComponent
  ]
})
export class CoreModule { 
  constructor( @Optional() @SkipSelf() parent: CoreModule) {
    if (parent) {
      throw new Error('核心模塊已經加載了，請勿重復加載');
    }
  }
}

　　　　　　　　代碼解釋：

　　　　　　　　　　@SkipSelf() -> 該注解的作用是告訴應用在進行依賴注入時要排除自身（即：不想從當前元素獲取依賴），這樣注入器就會從一個在自己 上一級 的組件開始搜索一個CoreModule依賴；如果不添加時就會出現解析錯誤：

　　　　　　　　　　　　

　　　　　　　　　　@Optional() -> 該注解的作用是保證依賴找不到時報錯，當CoreModule不存在時就進行了依賴注入就會報錯；當無法確保依賴是否存在的情況下，而又為了避免拋出找不到依賴的錯誤情況，可以使用@Optional()注解，這樣該依賴是可選的，此處我們是為了保證都次導入核心模塊時不依賴注入CoreModule；如果不添加就會出現實例找不到的錯誤：

　　　　　　　　　　　　

　　　　1.2.2 共享模塊

　　　　　　該模塊可以多次加載，將一些公用的組件和模塊放到該模塊下並做導出操作

　　　　　　ng g m shared

　　1.3 構建應用大體結構

　　　　利用flex布局實現三段式布局，flex布局詳解

　　　　1.3.1 模塊導入

　　　　　　在主模塊中導入核心模塊和共享模塊

　　　　　　

　　　　1.3.2 重構主組件　　　　　

<div class="site">
  <header>
    <app-header></app-header>
  </header>
  <main>
    <app-main></app-main>
  </main>
  <footer>
    <app-footer></app-footer>
  </footer>
</div>

　　　　　　坑01：雖然已經在主模塊中導入了核心模塊，但是在主模塊中的所有組件只可以用核心模塊中導出的東西

　　　　　　技巧01：在核心模塊中導出主模塊中需要用到的三個組件　　

　　　　　　　　

import { NgModule,  SkipSelf, Optional } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HeaderComponent } from './header/header.component';
import { MainComponent } from './main/main.component';
import { FooterComponent } from './footer/footer.component';


@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [
    HeaderComponent,
    MainComponent,
    FooterComponent
  ],
  exports: [
    HeaderComponent,
    MainComponent,
    FooterComponent
  ]
})
export class CoreModule { 
  constructor( @Optional() @SkipSelf() parent: CoreModule) {
    if (parent) {
      throw new Error('核心模塊已經加載了，請勿重復加載');
    }
  }
}

　　　　1.3.3 添加全局樣式

　　　　　　在全局樣式中利用flex布局實現主組件的三段式布局

html, body, app-root, mat-sidenav-container, .site {
    width: 100%;
    height: 100%;
    margin: 0;
}

.site {
    display: flex;
    flex-direction: column;
}

header {
    background-color: skyblue;
}

main {
    background-color: grey;
    flex: auto;
}

footer {
    background-color: skyblue;
}

　　　　1.3.4 效果展示

　　　　　　

 

2 @angular/material使用

　　2.1 安裝 material 和 cdk

　　　　@angular/cdk -> ng 對於 ui 組建的基礎架構，是由 material 團隊開發與維護的, 之所以會有 cdk 看樣子是因為在開發 material 的時候隨便抽象一個層次出來給大家用。

npm install --save @angular/material @angular/cdk

　　　　技巧01：推薦使用cnpm安裝

　　2.2 安裝 animations

　　　　一些 material 組件需要依賴 @angular/animations 來實現動畫跳轉

npm install --save @angular/animations

　　　　技巧01：僅僅安裝 @angular/animations 是沒有用的，還需要在核心模塊或者是主模塊中導入BrowserAnimationsModule或者NoopAnimationsModule

　　　　　　

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


import { AppComponent } from './app.component';
import { TestModule } from './test/test.module';
import { CoreModule } from './core/core.module';
import { SharedModule } from './shared/shared.module';



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

　　2.3 引入material內置主題

　　　　在全局演示用利用 @import 引入

@import '~_@angular_material@5.2.2@@angular/material/prebuilt-themes/deeppurple-amber.css';

　　2.4 手勢支持

　　　　由於material是一個支持多種設備終端的組件庫，為了支持一些移動端設備material組件用到了HammerJS，如果沒有HammerJS就可能出現某些移動端不能正常顯示

cnpm install --save hammerjs

　　　　技巧01：僅僅安裝hammerjs還不行，還需要在核心模塊或者主模塊中引入

import 'hammerjs';

　　　　

import { NgModule,  SkipSelf, Optional } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HeaderComponent } from './header/header.component';
import { MainComponent } from './main/main.component';
import { FooterComponent } from './footer/footer.component';

import 'hammerjs';

@NgModule({
  imports: [
    CommonModule,
    BrowserAnimationsModule
  ],
  declarations: [
    HeaderComponent,
    MainComponent,
    FooterComponent
  ],
  exports: [
    HeaderComponent,
    MainComponent,
    FooterComponent
  ]
})
export class CoreModule { 
  constructor( @Optional() @SkipSelf() parent: CoreModule) {
    if (parent) {
      throw new Error('核心模塊已經加載了，請勿重復加載');
    }
  }
}

 

3 MatSidenavModule的使用

　　3.1 導入MatSidenavModule

　　　　在共享模塊中導入並導出MatSidenavModule

　　　　

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

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

　　3.2 使用MatSidenavModule中的組件

　　　　使用MatSidenavModule中的組件實現側邊欄效果

　　　　

<mat-sidenav-container>
  <mat-sidenav #sidenav>
    <p>hello boy</p>
  </mat-sidenav>

  <div class="site">
    <header>
      <app-header></app-header>
    </header>
    <main>
      <button (click)="sidenav.open()">點擊划出</button>
      <app-main></app-main>
    </main>
    <footer>
      <app-footer></app-footer>
    </footer>
  </div>
  
</mat-sidenav-container>

　　3.3 效果展示

　　　　

　　3.4 官方文檔

　　　　點擊前往