Angular---slide&questionTestApp项目之二（使用NG-ZORRO、FontAwesome）

NG-ZORRO(Ant Design of Angular)

• 支持环境：现代浏览器和 IE9 及以上（需要 polyfills）
• 支持Angular ^6.0.0版本
• 组件和指令都是以nz-打头，比如按钮的nz-button
• 组件和指令的属性都是nz打头其后驼峰命名，比如nzSize
• 栅格划为24等分

安装

1.安装ng-zorro

npm install ng-zorro-antd --save

ng add ng-zorro-antd：引入国际化文件，导入模块，引入样式文件等

2.安装FontAwesome

npm install --save font-awesome

引入

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

import {Nf4AppComponent} from './nf4-app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import {NgZorroAntdModule, NZ_I18N, NZ_MESSAGE_CONFIG, zh_CN} from 'ng-zorro-antd';
import { AngularFontAwesomeModule } from 'angular-font-awesome';
import { registerLocaleData } from '@angular/common';
import zh from '@angular/common/locales/zh';
import { FileTreeComponent } from './file-tree/file-tree.component';
import { InputModalComponent } from './input-modal/input-modal.component';
import { MoveFileModalComponent } from './move-file-modal/move-file-modal.component';
import { UsercenterComponent } from './usercenter/usercenter.component';
import { QuestionTestComponent } from './question-test/question-test.component';
import {QuestionEditModalComponent} from './question-edit-modal/question-edit-modal.component';
import { SetPublishTimeComponent } from './set-publish-time/set-publish-time.component';
import { AddOptionModalComponent } from './add-option-modal/add-option-modal.component';
import { GenerateQRCodeModalComponent } from './generate-qrcode-modal/generate-qrcode-modal.component';
import { StatistcsAnswerModalComponent } from './statistcs-answer-modal/statistcs-answer-modal.component';
import { ShowAnswerModalComponent } from './show-answer-modal/show-answer-modal.component';
/*添加为table*/
import {NgxEchartsModule} from 'ngx-echarts';

/*生成二维码*/
import { NgxQRCodeModule } from 'ngx-qrcode2';
/*路由*/
import { RouterModule, Routes } from '@angular/router';
/*路由跳转到问题检测:question-test*/
const appRoutes: Routes = [
  { path: '', redirectTo: '/usercenter', pathMatch: 'full' }, // 添加默认路由
  { path: 'nf4slide/toUserPage', redirectTo: '/usercenter', pathMatch: 'full' },
  { path: 'usercenterA', redirectTo: '/usercenter', pathMatch: 'full' },
  { path: 'usercenter', component: UsercenterComponent },
  { path: 'question-test', component: QuestionTestComponent },
];
registerLocaleData(zh);

@NgModule({
  declarations: [
    FileTreeComponent,
    InputModalComponent,
    MoveFileModalComponent,
    Nf4AppComponent,
    UsercenterComponent,
    SetPublishTimeComponent,
    QuestionEditModalComponent,
    AddOptionModalComponent,
    StatistcsAnswerModalComponent,
    GenerateQRCodeModalComponent,
    ShowAnswerModalComponent,
    QuestionTestComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    HttpClientModule,
    /** 导入 ng-zorro-antd 模块 **/
    NgZorroAntdModule,
    AngularFontAwesomeModule,
    NgxQRCodeModule,
    NgxEchartsModule,
    RouterModule.forRoot(
      appRoutes
    )
  ],
  providers: [
    /** 配置 ng-zorro-antd 国际化 **/
    { provide: NZ_I18N, useValue: zh_CN },
    { provide: NZ_MESSAGE_CONFIG, useValue: { nzMaxStack: 2 }}
    ],
  bootstrap: [Nf4AppComponent]
})
export class AppModule { }

本应用主要分成usercenter、question-test两部分，各部分分成不同组件。

Angular6特性：

1.service注入，没用到的service不会被webpack中的摇树优化(tree-service)

@Injectable({
    provideIn:'root' //新添的,表示从root根部就开始注入
})

2.RxJS 6

（）：事件绑定、[]:属性绑定、{{}}:插值表达式、[()]:双向绑定