Angular4+ASP.NET Core中Angular2Csv参数解析失败求助

我来帮你搞定这个导出CSV的报错问题——你遇到的Can't resolve all parameters for Angular2Csv: (?, ?, ?)错误，根源是对0.2.5版本的angular2-csv用法理解有误，下面一步步帮你修复：

错误原因拆解 #

你犯了两个关键错误：

1. 把Angular2Csv当成Angular服务添加到了providers：它本质是一个用来直接实例化的工具类，不需要Angular的依赖注入支持。
2. 模板中使用了不存在的<angular2csv>组件：0.2.5版本的库并没有提供这个组件，组件形式的用法是后续版本（比如改名后的ngx-csv）才新增的特性。

修复步骤 #

1. 移除模块中的providers配置 #

首先打开app.module.server.ts，把Angular2Csv从providers数组里删掉，甚至可以直接删掉对应的导入语句：

// app.module.server.ts
@NgModule({
  declarations:[...],
  imports:[...],
  providers:[] // 移除Angular2Csv，不需要在这里注册
})

2. 在组件中添加导出方法 #

修改你的MyComponent，添加一个点击触发的导出方法，通过实例化Angular2Csv来触发导出：

// MyComponent.ts
import { Angular2Csv } from 'angular2-csv';

@Component({
  selector: 'home',
  templateUrl: './my.component.html',
  styleUrls: ['./my.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class MyComponent {
  options = {
    fieldSeparator: ',',
    quoteStrings: '"',
    decimalseparator: '.',
    showLabels: false,
    headers: [],
    showTitle: true,
    title: 'asfasf',
    useBom: false,
    removeNewLines: true,
    keys: ['approved','age','name' ]
  };
  data = [
    { name: "Test, 1", age: 13, average: 8.2, approved: true, description: "using 'Content here, content here' " },
    { name: 'Test 2', age: 11, average: 8.2, approved: true, description: "using 'Content here, content here' " },
    { name: 'Test 3', age: 10, average: 8.2, approved: true, description: "using 'Content here, content here' " }
  ];

  // 新增导出方法
  exportToCsv() {
    new Angular2Csv(this.data, 'test.csv', this.options);
  }
}

3. 修改模板，添加导出按钮 #

把原来的<angular2csv>标签替换成一个普通按钮，绑定上刚才的导出方法：

<button (click)="exportToCsv()">导出CSV文件</button>

这样修改后，点击按钮就能正常触发CSV导出了，之前的参数解析错误也会消失。

内容的提问来源于stack exchange，提问作者John