这是我参与11月更文挑战的第天，活动详情查看：2021最后一次更文挑战
1. Angular 集成 echart
下载 echart
npm install echarts
在你的组件引用
ts
import {
Component,
AfterViewInit,
ViewChild,
ElementRef,
} from "@angular/core";
import * as echarts from "echarts";
chartInstance: any;
@ViewChild("chart", { static: false }) chart: ElementRef;
...
ngAfterViewInit() {
this.chartInstance = echarts.init(this.chart.nativeElement);
this.chartInstance.setOption(LINE_OPTIONS);
}
html
<div #chart class="chart-wrap"></div>
2. Angular 集成font-awesome
下载 font-awesome
npm i font-awesome --save
yarn add font-awesome --save
然后在angular.json的build和test对象的styles里添加上
"styles": [
"node_modules/font-awesome/css/font-awesome.min.css",
"src/styles.scss"
],
3. Angular 集成push.js
3.1 什么是push.js
push.js 是一个通知弹窗，与普通弹窗不同的是它可以像原生桌面软件一样脱离浏览器进行通知提示。
3.2. 集成和基本使用方法
- 下载
npm install push.js --save
or
yarn add push.js --save
- 使用
import Push from 'push.js';
// some other codes
ngOnInit(){
Push.create('Hello world!')
}
3.3 可传参数和配置项
- 通知配置项
| 选项 | 说明 |
|---|---|
| body | 通知的内容文本 |
| icon | 右侧x下面的标题 |
| requireInteraction | 是否一直存在，直到被点击或者关闭 |
| timeout | 多久自动消失 |
3.4 谷歌通知被禁止怎么恢复
开启或关闭弹出式窗口
- 计算机上打开
Chrome - 在右上角，依次点击
更多图标然后设置 - 在底部，点击
高级 隐私设置和安全性下方，点击网站设置- 点击
通知 - 在
禁止部分删除你的网站即可
4. Angular 集成提示框
此为一个提示框，可设置内容和显示时间等。
地址 ： www.npmjs.com/package/ang…
方法： npm install angular2-toaster --save
- HTML :
<toaster-container [toasterconfig]="toasterconfig"></toaster-container>
- ts :
- 在所用模块内引入包
import { ToasterModule } from '@angular2-toaster';
imports: [
ToasterModule
]
- 引入里面需要用的服务
import { ToasterService , ToasterConfig } from 'angular2-toaster';
| 参数名称 | 可设定值 |
|---|---|
| ToasterService | 传进去内容的服务，可以设置 |
| type | "success" 、 "error" 分别对应不同的样式 |
| title | 标题 |
| body | 内容 |
| ToasterConfig | 设置存在时间 |
- 在 construstor 中注入服务：
public constructor (
provite toasterService : toasterService
){}
- 调用里面的方法:
this.toasterService.pop("success","标题","内容")
- 设置时间
public toasterconfig : ToasterConfig = new ToasterConfig({timeout:2000});
这是设置弹窗存在2s； 里面的 ToasterConfig 是上面import来的， toasterconfig 是在html里面传递到插件里的。
注意！！
- 在同一个路由下，只能有一个 ,否则会在最后一个标签引用的组件里提示框一直存在不消失，并且前面组件出现的弹框都会出现在最后一个组件里。
- 可以通过子组件给父组件传值的方法传递时间参数进去设置消失时间。
更多用法更新于 github
