使用ngx-feedback库收集评论和反馈信息

使用ngx-feedback库收集评论和反馈信息
插件名称 ngx-feedback Library
发布时间 2020年4月8日
插件作者 tnicola

Angular的反馈收集器库,可轻松收集有关产品,文章或潜在错误的用户评论和实时反馈。

该库会在屏幕上创建一个浮动的“反馈”按钮,并在单击该按钮时显示一个反馈模态。

还支持截图功能,该功能使用户能够捕获并发送特定元素的评论和反馈。

特性

  • 反馈按钮将自动附加到页面边缘。
  • 选择一般或特定反馈的可能性。
  • 页面上所选区域的屏幕快照。

安装和导入:

您需要安装html2canvas lib(必需的依赖项)才能获取快照:

npm i html2canvas
npm i ngx-feedback

用法

app.module.ts

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

import { AppComponent } from './app.component';
import { NgxFeedbackModule } from 'ngx-feedback';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgxFeedbackModule // 将此添加到导入
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

import { Component, OnInit } from '@angular/core';
import { NgxFeedbackService, FeedbackData } from 'ngx-feedback';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
    constructor(private readonly feedbackService: NgxFeedbackService) {}
    title = 'ngx-feedback-lib';

    ngOnInit() {
        this.feedbackService.listenForFeedbacks().subscribe((data: FeedbackData) => {
            // 使用这里反馈的数据
        });
    }
}