Material使用03 MdCardModule模塊、MdInputModule模塊

時間 2019-11-09

標籤 material 使用 mdcardmodule 模塊 mdinputmodule 简体版

原文原文鏈接

需求：先須要增長一個登陸模塊npm

1 建立登陸模塊

　　ng g m testLoginbootstrap

　　1.1 將共享模塊導入到登陸模塊中

import { NgModule } from '@angular/core';
import { TestLoginComponent } from './test-login/test-login.component';
import { SharedModule } from '../shared/shared.module';

@NgModule({
  imports: [
    SharedModule
  ],
  declarations: [TestLoginComponent]
})
export class TestLoginModule { }

View Code

　　1.2 將建立好的登陸模塊導入到主模塊中

2 建立登陸組件

　　ng g c testLogin/testLogin瀏覽器

3 給登陸模塊添加路由文件test-login-routing.module.ts

　　3.1 進入到路由文件輸入 ngroute 而後選擇 ng-router-featuremodule

　　　　原理：咱們已經在編輯其中安裝了一個快捷插件Snippetsapp

　　3.2 對路由文件進行重構

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CommonModule } from '@angular/common';
import { TestLoginComponent } from './test-login/test-login.component';

const routes: Routes = [
    { path: 'testLogin', component: TestLoginComponent }
];

@NgModule({
    imports: [CommonModule, RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class TestLoginRoutingModule {}

View Code

　　3.3 將登陸模塊的路由導入到登陸模塊中

import { NgModule } from '@angular/core';
import { TestLoginComponent } from './test-login/test-login.component';
import { SharedModule } from '../shared/shared.module';
import { TestLoginRoutingModule } from './test-login-routing.module';

@NgModule({
  imports: [
    SharedModule,
    TestLoginRoutingModule
  ],
  declarations: [TestLoginComponent]
})
export class TestLoginModule { }

View Code

　　3.4 技巧：對每一個模塊都單獨添加一個路由文件

4 給主模塊建立路由文件app-routing.module.ts

　　4.1 進入到路由文件利用快捷鍵生成路由文件模板

　　4.2 對路由文件進行重構

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CommonModule } from '@angular/common';
import { AppComponent } from './app.component';

const routes: Routes = [
    { path: '', redirectTo: '/testLogin', pathMatch: 'full' }
];

@NgModule({
    imports: [CommonModule, RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule {}

View Code

　　4.3 將主路由文件導入到主模塊中

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

import { AppComponent } from './app.component';
import { HeaderComponent } from './frame/header/header.component';
import { MainComponent } from './frame/main/main.component';
import { FooterComponent } from './frame/footer/footer.component';
import { SidebarComponent } from './frame/sidebar/sidebar.component';
import { CoreModule } from './core/core.module';
import { AppRoutingModule } from './app-routing.module';
import { LoginModule } from './login/login.module';
import { TestLoginModule } from './test-login/test-login.module';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    MainComponent,
    FooterComponent,
    SidebarComponent
  ],
  imports: [
    CoreModule,
    AppRoutingModule,
    BrowserModule,
    LoginModule,
    TestLoginModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

View Code

　　4.4 瀏覽器訪問 http://127.0.0.1:4200 後會自動重定向到 http://127.0.0.1:4200/testLogin

5 在登陸組件中使用MdCardModule模塊提供的組件

　　5.1 在共享模塊中導入MdCardModule模塊

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import  {
  MdSidenavModule, 
  MdToolbarModule, 
  MdIconModule, 
  MdButtonModule,
  MdCardModule,
  MdInputModule
 } from '@angular/material';


@NgModule({
  imports: [
    CommonModule,
    MdSidenavModule,
    MdToolbarModule,
    MdIconModule,
    MdButtonModule,
    MdCardModule,
    MdInputModule
    
  ],
  declarations: [],
  exports: [
    CommonModule,
    MdSidenavModule,
    MdToolbarModule,
    MdIconModule,
    MdButtonModule,
    MdCardModule,
    MdInputModule
  ]
})
export class SharedModule { }

View Code

　　5.2 在登陸模塊中使用 md-card 組件

　　　　技巧01：因爲md-card組件是有動畫的，須要導入一個動畫依賴；並將這個動畫模塊導入到核心模塊中去dom

　　　　　　cnpm install --save @angular/animationide

import { NgModule, Optional, SkipSelf } from '@angular/core';
import { SharedModule } from '../shared/shared.module';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { SidenavComponent } from './sidenav/sidenav.component';

import { DomSanitizer } from '@angular/platform-browser';
import { MdIconRegistry } from '@angular/material';
import { loadSvgResources } from '../utils/loadSvgResources'

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

@NgModule({
  imports: [
    SharedModule,
    BrowserAnimationsModule
  ],
  declarations: [
    HeaderComponent, 
    FooterComponent, 
    SidenavComponent
  ]
  ,
  exports: [
    HeaderComponent, 
    FooterComponent,
    SidenavComponent
  ]
})
export class CoreModule { 
  constructor(
    @Optional() @SkipSelf() parentModule: CoreModule,
    mdIconRegistry: MdIconRegistry,
    domSanitizer: DomSanitizer
  ) {
      if (parentModule) {
        throw new Error('CoreModule模塊已經存在，請盡在主模塊中進行引入。')
      }
      loadSvgResources(mdIconRegistry, domSanitizer);
  }
}

View Code

<md-card>
    <md-card-header>
        <md-card-title>登陸表單</md-card-title>
    </md-card-header>
    <md-card-content>
        <h2>內容區域</h2>
    </md-card-content>
    <md-card-actions>
        <p>還沒註冊？<a href="">註冊</a></p>
        <p>忘記密碼？<a href="">找回</a></p>
    </md-card-actions>
</md-card>

View Code

　　5.3 效果圖以下

6 在登陸組件中使用MdInputModule模塊

　　6.1 在共享模塊中導入MdInputModule模塊

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import  {
  MdSidenavModule, 
  MdToolbarModule, 
  MdIconModule, 
  MdButtonModule,
  MdCardModule,
  MdInputModule
 } from '@angular/material';


@NgModule({
  imports: [
    CommonModule,
    MdSidenavModule,
    MdToolbarModule,
    MdIconModule,
    MdButtonModule,
    MdCardModule,
    MdInputModule
    
  ],
  declarations: [],
  exports: [
    CommonModule,
    MdSidenavModule,
    MdToolbarModule,
    MdIconModule,
    MdButtonModule,
    MdCardModule,
    MdInputModule
  ]
})
export class SharedModule { }

View Code

　　6.2 在登陸組件中使用md-input-container組件

<md-card>
    <md-card-header>
        <md-card-title>登陸表單</md-card-title>
    </md-card-header>
    <md-card-content>
        <md-input-container color="primary" floatPlaceholder="float" >
            <span mdPrefix>Wang.</span>
            <input mdInput type="text" placeholder="你的Email" />
            <span mdSuffix>@163.com</span>
            <md-hint>這是必填項喲</md-hint>
            <md-error>郵箱必填</md-error>
        </md-input-container>
    </md-card-content>
    <md-card-actions>
        <p>還沒註冊？<a href="">註冊</a></p>
        <p>忘記密碼？<a href="">找回</a></p>
    </md-card-actions>
</md-card>

View Code

　　6.3 效果圖以下

　　6.4 md-input-container高級用法

　　　　6.4.1 md-input-container擁有的一些屬性

　　　　　　color : md-input-container組件的基調顏色動畫

　　　　　　　　primary -> 主色spa

　　　　　　　　accent -> 副色插件

　　　　　　　　warn -> 警告3d

　　　　　　floatPlaceholder : 輸入提示動畫效果

　　　　　　　　float -> 浮動顯示

　　　　　　　　always -> 浮動到上方

　　　　　　　　never -> 不進行浮動顯示

　　　　　　hintLabel ：提示信息，顯示在input標籤下方

<md-card>
  <md-card-header>
    <md-card-title>登陸卡片</md-card-title>
  </md-card-header>
  <md-card-content>
    <md-input-container color="primary" floatPlaceholder="foloat" hintLabel="郵箱是必填項">
      <!-- <span mdPrefix>www.xiangxu.</span> -->
      <input mdInput type="text" placeholder="你的郵箱" />
      <!-- <span mdSuffix>@163.com</span> -->
    </md-input-container>
  </md-card-content>
  <md-card-actions>
    <p>還沒註冊嗎？&nbsp;<a href="">註冊</a></p>
    <p>忘記密碼了嗎？&nbsp;<a href="">登陸</a></p>
  </md-card-actions>
</md-card>

View Code

　　　　6.4.2 爲md-input-container擁有的一些屬性這是前綴和後綴

<md-card>
  <md-card-header>
    <md-card-title>登陸卡片</md-card-title>
  </md-card-header>
  <md-card-content>
    <md-input-container color="primary" floatPlaceholder="foloat" hintLabel="郵箱是必填項">
      <span mdPrefix>www.xiangxu.</span>
      <input mdInput type="text" placeholder="你的郵箱" />
      <span mdSuffix>@163.com</span>
    </md-input-container>
  </md-card-content>
  <md-card-actions>
    <p>還沒註冊嗎？&nbsp;<a href="">註冊</a></p>
    <p>忘記密碼了嗎？&nbsp;<a href="">登陸</a></p>
  </md-card-actions>
</md-card>

View Code