首页 › Angular论坛 › angular插件

何处不忧伤 發表於 2020-12-11 17:41:00

angular插件

<h1 id="1--material">1- Material</h1>
<h3 id="步骤-1安装-angular-materialangular-cdk-和-angular-动画库">步骤 1：安装 Angular Material、Angular CDK 和 Angular 动画库</h3>
<p>你可以使用 npm 或 yarn 命令行工具来安装这些包。请从下面的例子中任选一个适合你项目需求的。</p>
<h4 id="npm-命令">NPM 命令</h4>
<pre><code class="language-bash">npm install --save @angular/material @angular/cdk @angular/animations
</code></pre>
<h3 id="步骤-2配置动画">步骤 2：配置动画</h3>
<p>安装完动画包之后，请在应用中导入 <code>BrowserAnimationsModule</code> 以支持动画。</p>
<pre><code class="language-ts">import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

@NgModule({
...
imports: ,
...
})
export class PizzaPartyAppModule { }
</code></pre>
<p>另外，你还可以通过导入 <code>NoopAnimationsModule</code> 来禁用动画。</p>
<pre><code class="language-ts">import {NoopAnimationsModule} from '@angular/platform-browser/animations';

@NgModule({
...
imports: ,
...
})
export class PizzaPartyAppModule { }
</code></pre>
<h3 id="步骤-3导入组件模块">步骤 3：导入组件模块</h3>
<p>为你想用的每个组件导入相应的 NgModule：</p>
<pre><code class="language-ts">import {MatButtonModule, MatCheckboxModule} from '@angular/material';

@NgModule({
...
imports: ,
...
})
export class PizzaPartyAppModule { }
</code></pre>
<p>另外，你还可以创建一个单独的 NgModule 来导入应用中要用到的所有 Angular Material 组件。然后只要在其它用到这些组件的模块中导入这个模块就可以了。</p>
<pre><code class="language-ts">import {MatButtonModule, MatCheckboxModule} from '@angular/material';

@NgModule({
imports: ,
exports: ,
})
export class MyOwnCustomMaterialModule { }
</code></pre>
<p>无论哪种方式，都要确保在 Angular 的 <code>BrowserModule</code> 之后再导入 Angular Material 模块，因为 NgModule 的导入顺序很重要。</p>
<h3 id="步骤-4包含一个主题">步骤 4：包含一个主题</h3>
<p>要在应用中使用所有的核心组件和主题样式，都<strong>必须</strong>包含一个主题。</p>
<p>要使用一个预构建的主题，只要在应用中全局包含一个 Angular Material 的预构建主题就可以了。如果你在使用 Angular CLI，可以把下列代码添加到你的 <code>style.css</code> 中：</p>
<pre><code class="language-css">@import "~@angular/material/prebuilt-themes/indigo-pink.css";
</code></pre>
<p>如果你没有使用 Angular CLI，你可以在 <code>index.html</code> 中通过 <code>&lt;link&gt;</code> 元素来包含一个预构建主题。</p>
<p>要了解更多关于主题的信息以及创建自定义主题的指引，参见主题指南。</p>
<h3 id="步骤-5手势支持">步骤 5：手势支持</h3>
<p>有些组件（<code>mat-slide-toggle</code>、<code>mat-slider</code>、<code>matTooltip</code>）要依赖 HammerJS 提供手势支持。为了获得这些组件的全部特性，应用中必须加载 HammerJS。</p>
<p>你可以通过 npm、CDN（比如 Google CDN）或直接从应用中引入 HammerJS。</p>
<p>要想通过 npm 安装，请使用下列命令：</p>
<h4 id="npm-命令-1">NPM 命令</h4>
<pre><code class="language-bash">npm install --save hammerjs
</code></pre>
<h1 id="2--i18n">2- i18n</h1>
<p>Internationalization (i18n)</p>
<hr>
<p>Documentation</p>
<ul>
<li>https://github.com/ngx-translate/core</li>
</ul>
<h2 id="第一步安装">第一步(安装)</h2>
<p>ngx-translate is a internationalization (i18n) library for Angular</p>
<pre><code>npm install @ngx-translate/core --save
npm install @ngx-translate/http-loader --save
</code></pre>
<h2 id="第二步导入">第二步(导入)</h2>
<p>app.module.ts</p>
<pre><code class="language-js">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:
      }
    })      
],
</code></pre>
<h2 id="第三步设置切换语言">第三步(设置切换语言)</h2>
<p>app/assets/i18n/en.json + app/assets/i18n/zh.json</p>
<pre><code class="language-json">{
    "HelloTrans":"Implement",
    "GetI18n":"Get i18n value"
}
//=======================================
{
    "HelloTrans":"实现多国语系",
    "GetI18n":"取得多国系值"
}
</code></pre>
<h2 id="第四步浏览器默认语言设置">第四步(浏览器默认语言设置)</h2>
<p>app.component.ts</p>
<pre><code class="language-js">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 {}

}

</code></pre>
<h2 id="第五步点击切换语言">第五步(点击切换语言)</h2>
<p>menu.component.html + menu.component.ts</p>
<pre><code class="language-js">&lt;div class="buttonArea"&gt;
    &lt;button type="button" class="btn-light" (click)="changeLang('en')"&gt;English&lt;/button&gt;
    &lt;button type="button" class="btn-light" (click)="changeLang('zh')"&gt;中文&lt;/button&gt;
&lt;/div&gt;

//-----------------------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 {}

}
</code></pre>
<h2 id="第六步使用方式">第六步(使用方式)</h2>
<p>i18n.component.html + i18n.component.ts</p>
<pre><code class="language-js">&lt;h1 class="bd-title"&gt;Internationalization(i18n)&lt;/h1&gt;
&lt;h2&gt;HTML (pipe)&lt;/h2&gt;

&lt;p&gt;{{'HelloTrans'| translate}}&lt;/p&gt;
&lt;h2&gt;service&lt;/h2&gt;
&lt;button type="button" class="btn btn-primary" (click)="showI18n()"&gt;
    {{'GetI18n'|translate}}
&lt;/button&gt;


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) =&gt;{
      alert(val);
    });
}

ngOnInit() {}
}
</code></pre>
<h1 id="3--echarts">3- Echarts</h1>
<h2 id="1-安装">1. 安装：</h2>
<pre><code>npm install echarts --save
</code></pre>
<h2 id="2-在-typescript-文件中导入echarts">2. 在 TypeScript 文件中导入echarts</h2>
<pre><code>import * as echarts from 'echarts';
</code></pre>
<h2 id="3-定制">3. 定制</h2>
<p>根据官方demo和API，开发自己的需求即可</p>
<p>[https://www.echartsjs.com/examples/</p>
<p>](https://www.echartsjs.com/examples/)4.html布局</p>
<h2 id="4-容器">4. 容器</h2>
<pre><code>&lt;div id="lineChart" style="width: 600px;height:400px;"&gt;&lt;/div&gt;
</code></pre>
<h2 id="5ts代码">5.ts代码</h2>
<pre><code class="language-js">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: ,
      type: 'line'
      }]
    }
    lineChart.setOption(lineChartOption);
}
}
</code></pre><br><br>
来源：https://www.cnblogs.com/dingdc/p/14121592.html

查看完整版本: angular插件