快速上手

本节将介绍如何在项目中使用 Element-angular。

对样式引入有疑问可以返回阅读上一章节。

创建项目

如果你还没有一个 Angular 项目，可以考虑使用 cli 快速安装。

# install cli
npm install -g @angular/cli
# init project
ng new YOUR-PROJECT-NAME --style=scss
cd YOUR-PROJECT-NAME
# install element-angular
npm i --save element-angular
# run
ng server

根模块引入

将 element-angular 引入根模块后，可以在任意组件中使用。

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
import { RouterModule } from '@angular/router'
import { AppComponent } from './app.component'
import { ElModule } from 'element-angular'
@NgModule({
  declarations: [
    ExAppComponent,
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    ElModule.forRoot(),
  ],
  providers: [],
  bootstrap: [ExAppComponent],
})
export class AppModule {
}
// 不同组件与指令使用请参考具体章节

引入单个组件

附: 即便是引入整个库，Angular 在 Build 时也可以去除未使用的代码， 请参考 Tree shaking

import { CommonModule } from '@angular/common'
import { NgModule } from '@angular/core'
import { FormsModule } from '@angular/forms'
import { MenuComponent } from './menu/menu.component'
import { ElChildModules } from 'element-angular'
@NgModule({
  declarations: [
    MenuComponent,
  ],
  imports: [
    CommonModule,
    FormsModule,
    ElChildModules.ElButton,          // just import button module
  ],
  exports: [ExGuideMainComponent],
  providers: [],
})
export class MenuModule {
}