angular插件

1- Material

步骤 1：安装 Angular Material、Angular CDK 和 Angular 动画库

你可以使用 npm 或 yarn 命令行工具来安装这些包。请从下面的例子中任选一个适合你项目需求的。

NPM 命令

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

步骤 2：配置动画

安装完动画包之后，请在应用中导入 BrowserAnimationsModule 以支持动画。

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

@NgModule({
  ...
  imports: [BrowserAnimationsModule],
  ...
})
export class PizzaPartyAppModule { }

另外，你还可以通过导入 NoopAnimationsModule 来禁用动画。

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

@NgModule({
  ...
  imports: [NoopAnimationsModule],
  ...
})
export class PizzaPartyAppModule { }

步骤 3：导入组件模块

为你想用的每个组件导入相应的 NgModule：

import {MatButtonModule, MatCheckboxModule} from '@angular/material';

@NgModule({
  ...
  imports: [MatButtonModule, MatCheckboxModule],
  ...
})
export class PizzaPartyAppModule { }

另外，你还可以创建一个单独的 NgModule 来导入应用中要用到的所有 Angular Material 组件。然后只要在其它用到这些组件的模块中导入这个模块就可以了。

import {MatButtonModule, MatCheckboxModule} from '@angular/material';

@NgModule({
  imports: [MatButtonModule, MatCheckboxModule],
  exports: [MatButtonModule, MatCheckboxModule],
})
export class MyOwnCustomMaterialModule { }

无论哪种方式，都要确保在 Angular 的 BrowserModule 之后再导入 Angular Material 模块，因为 NgModule 的导入顺序很重要。

步骤 4：包含一个主题

要在应用中使用所有的核心组件和主题样式，都必须包含一个主题。

要使用一个预构建的主题，只要在应用中全局包含一个 Angular Material 的预构建主题就可以了。如果你在使用 Angular CLI，可以把下列代码添加到你的 style.css 中：

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

如果你没有使用 Angular CLI，你可以在 index.html 中通过 <link> 元素来包含一个预构建主题。

要了解更多关于主题的信息以及创建自定义主题的指引，参见主题指南。

步骤 5：手势支持

有些组件（mat-slide-toggle、mat-slider、matTooltip）要依赖 HammerJS 提供手势支持。为了获得这些组件的全部特性，应用中必须加载 HammerJS。

你可以通过 npm、CDN（比如 Google CDN）或直接从应用中引入 HammerJS。

要想通过 npm 安装，请使用下列命令：

NPM 命令

npm install --save hammerjs

2- i18n

Internationalization (i18n)

---

Documentation

• https://github.com/ngx-translate/core

第一步(安装)

ngx-translate is a internationalization (i18n) library for Angular

npm install @ngx-translate/core --save 
npm install @ngx-translate/http-loader --save 

第二步(导入)

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';

//这里
export function createTranslateLoader(http: HttpClient) {
   return new TranslateHttpLoader(http, './assets/i18n/', '.json?nocache =' + (new Date()).getTime());
}

imports: [
	BrowserModule,
	HttpClientModule,
    //这里
    TranslateModule.forRoot({
      loader: {
      provide: TranslateLoader,
      useFactory: (createTranslateLoader),
      deps: [HttpClient]
      }
    })      
],

第三步(设置切换语言)

app/assets/i18n/en.json + app/assets/i18n/zh.json

{
    "HelloTrans":"Implement",
    "GetI18n":"Get i18n value"
}
//=======================================
{
    "HelloTrans":"实现多国语系",
    "GetI18n":"取得多国系值"
}

第四步(浏览器默认语言设置)

app.component.ts

import { Component, OnInit } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'demo2';

  constructor(public translateService: TranslateService) {
    translateService.setDefaultLang('en');
    translateService.use('en')
  }
  ngOnInit(): void {}

}

第五步(点击切换语言)

menu.component.html + menu.component.ts

<div class="buttonArea">
    <button type="button" class="btn-light" (click)="changeLang('en')">English</button>
    <button type="button" class="btn-light" (click)="changeLang('zh')">中文</button>
</div>

//-----------------------js-----------------------------
import { Component, OnInit } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

export class MenuComponent implements OnInit {

  constructor(public translateService: TranslateService) {}
  changeLang(langKey){
    this.translateService.use(langKey);
  }
  getClass(path){
    return (location.pathname === path)? 'active' : '';
  }

  ngOnInit(): void {}

}

第六步(使用方式)

i18n.component.html + i18n.component.ts

<h1 class="bd-title">Internationalization(i18n)</h1>
<h2>HTML (pipe)</h2>

<p>{{'HelloTrans'| translate}}</p>
<h2>service</h2>
<button type="button" class="btn btn-primary" (click)="showI18n()">
    {{'GetI18n'|translate}}
</button>


import { Component, OnInit } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

export class I18nComponent implements OnInit {
  constructor(private translateService:TranslateService) {}
  showI18n(){
    this.translateService.get('HelloTran').subscribe((val:string) =>{
      alert(val);
    });
  }

  ngOnInit() {}
}

3- Echarts

1. 安装：

npm install echarts --save

2. 在 TypeScript 文件中导入echarts

import * as echarts from 'echarts';

3. 定制

根据官方demo和API，开发自己的需求即可

[https://www.echartsjs.com/examples/

](https://www.echartsjs.com/examples/)4.html布局

4. 容器

<div id="lineChart" style="width: 600px;height:400px;"></div>

5.ts代码

import { Component, OnInit } from '@angular/core';
import * as echarts from 'echarts';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
  constructor() {}

  ngOnInit() {
    this.initCharts();
  }
  initCharts() {
    const ec = echarts as any;
    const lineChart = ec.init(document.getElementById('lineChart'));

    const lineChartOption = {

      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
      }]
    }
    lineChart.setOption(lineChartOption);
  }
}