Question

我在项目中使用 Ionic 和 Angular 4 并尝试整合Ionic Refresher。需要说的是，我对Ionic来说是全新的，而且在Angular中并不是很好。

我已导入所有依赖项（我认为），但仍然收到错误：

未捕获错误：无法解析ElementRef的所有参数：（？）。

这是我的档案。

balances.component.html：

<ion-content>
  <ion-refresher (ionRefresh)="doRefresh($event)">
    <ion-refresher-content
      pullingIcon="arrow-dropdown"
      pullingText="Pull to refresh"
      refreshingSpinner="circles"
      refreshingText="Refreshing...">
    </ion-refresher-content>
  </ion-refresher>
</ion-content>
<!-- other code -->

balances.component.ts：

import { Component, OnInit, ElementRef } from '@angular/core';
import { Refresher, Content } from 'ionic-angular';

@Component({
  selector: 'pc-balances',
  templateUrl: './balances.component.html',
  styles: [``]
})
export class BalancesComponent implements OnInit {   
  constructor(
    public refresher: Refresher,
    public elementRef: ElementRef,
    public content: Content
  ) {}

  ngOnInit() {}

  /* Code for Refresher's example */
  doRefresh(refresher) {
    console.log('Begin async operation', refresher);

    setTimeout(() => {
      console.log('Async operation has ended');
      refresher.complete();
    }, 2000);
  }
}

balances.module.ts：

import { NgModule }           from '@angular/core';
import { ElementRef }         from '@angular/core';
import { IonicModule }        from 'ionic-angular';
import { Refresher, Content } from 'ionic-angular';
import { CommonModule }       from '@angular/common';
import { SharedModule }       from '../shared/shared.module';
import { HistoryModule }      from '../history/history.module';
import { BalancesComponent }  from './balances.component';

@NgModule({
  imports: [
    IonicModule,
    CommonModule,
    SharedModule,
    HistoryModule
  ],
  declarations: [
    BalancesComponent
  ],
  providers: [Refresher, Content, ElementRef]
})
export class BalancesModule { }

如您所见，我已将必要的依赖项导入模块并将其包含在providers中。我不知道为什么我仍然得到错误，可能是我错过了什么，欢迎任何帮助！

Answer 1

ElementRef 不是服务。 您应该避免将其注入提供程序数组。该组件的构造函数是注入它的最佳位置。
所以只需从 提供商数组 中删除 ElementRef 。

Answer 2

首先，感谢@David和@micronyks的帮助。解决方案非常简单：删除node_modules文件夹并重新运行npm i，然后重新运行离子项目。 Refresher除了import { IonicModule } from 'ionic-angular';之外不需要任何导入（如果你同时使用 Ionic 和 Angular 2/4 ，我已导入它你的模块和HTML结构中的balances.module.ts）应如下所示：

<ion-content>
  <ion-refresher (ionRefresh)="doRefresh($event)">
    <ion-refresher-content
      pullingIcon="arrow-dropdown"
      pullingText="Pull to refresh"
      refreshingSpinner="circles"
      refreshingText="Refreshing...">
    </ion-refresher-content>
  </ion-refresher>

  <!-- your HTML -->

</ion-content>

希望它会帮助别人。

离子清新剂。未捕获错误：无法解析ElementRef的所有参数：（？）

2 个答案: