Question

我正在一个项目中工作，并使用IONIC 3和Angular 4.在我需要创建一个负责创建popover控制器的组件之间。我可以非常轻松地将数据从该组件传输到弹出窗口组件。但是在尝试将数据从popover组件传输到该组件并出现奇怪的错误时出现问题无法解析ViewController的所有参数：（？，？，？）。

错误：

import { Component, OnInit, Host } from '@angular/core';
import { PageContainerComponent } from '../../component/pagecontainer/pagecontainer.component';
import { CommunicationService } from '../../service/communication-service/communication.service';
import { IonicPage, NavController, NavParams ,ViewController} from 'ionic-angular';


@Component({
  selector: 'autorefresh-comp',
  template: `
    <ion-grid class="dropdown-setting">
    <ion-row>
      <ion-col col-md-6>
        <ion-label class="label-text">Auto Refresh</ion-label>
      </ion-col>
      <ion-col col-md-4>
        <ion-toggle checked={{toggleVal}} [(ngModel)]="refreshalVal.toggleValSelected"></ion-toggle>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col col-md-12><hr></ion-col>
    </ion-row>
    <ion-row>
      <ion-col col-md-4>
        <ion-label class="label-text">Set Time</ion-label>
      </ion-col>
      <ion-col col-md-8>
      <ion-list >
        <ion-item>
        <ion-label>Select</ion-label>        
        <ion-select [(ngModel)]="refreshalVal.seconds" (click)=onDismiss(refreshalVal) interface="popover">
          <ion-option value="{{enumVal[i]}}" *ngFor="let sec of enumVal; let i = index;" >{{enumVal[i]}} seconds</ion-option>
        </ion-select>
        </ion-item>
              </ion-list>
      </ion-col>
    </ion-row>
    <h1>{{refreshalVal.toggleValSelected}}</h1>
    <h1>{{refreshalVal.seconds}}</h1>
  
  <ion-grid>
    `
})

export class AutoRefreshComp {

  enumVal: any;
  toggleVal: any;
  refreshalVal:any={};

  constructor(public navCtrl: NavController, public navParams: NavParams,public viewController:ViewController) {
  }


  ionViewWillLoad() {
    this.enumVal = this.navParams.get("enumVal");
    console.log("enumVal received:: ", this.enumVal);
    this.toggleVal = this.navParams.get("toggleVal");
    this.refreshalVal.toggleValSelected= this.toggleVal;
    console.log("toggleVal received:: ", this.toggleVal);
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad PopoverPage');
  }

  onDismiss(data){

    console.log(this.viewController);
    this.viewController.onDidDismiss(data);
    }



}

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler, IonicPageModule } from 'ionic-angular';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { PageContainerComponent } from './component/pagecontainer/pagecontainer.component';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { DynamicComponentService } from './MW-Ionic/dynamicservice/dynamic.service';
import { AngularLayoutWidget } from './MW-Ionic/layout-widget/angular2-layout-widget';
import { MetawidgetComponent } from './MW-Ionic/metawidget/metawidget.component';
import { Angular2WidgetProcessor } from './MW-Ionic/widgetprocessor/angular2-widget-processor.component';
import { HttpService } from './service/http-service/http.service';
import { ShareModule } from './share.module';
import { FilterComponent } from './component/filter/filter.component';
import { TableComponent } from './component/table/table.component';
import { NO_ERRORS_SCHEMA } from '@angular/core';
import { CommunicationService } from './service/communication-service/communication.service';
import { SignaturePadModule } from 'angular2-signaturepad';
import { IonicStorageModule } from '@ionic/storage';
import {ViewController} from 'ionic-angular';


//Widget As Component
import { 
  InputBoxComponent,
  ComboBoxComponent,
  DateComponent,
  CheckboxComponent,
  RadioComponent,
  ToggleComponent,
  ButtonComponent,
  TitleComponent,
  LookupComponent,
  SignatureComponent,
  SignatureButtonComponent,
  ListComponent,
  TextAreaComponent,
  OutputComponent,
  RowComponet,
  AutoRefreshSetting,
  AutoRefreshComp
} from './MW-Ionic/widget-component';

@NgModule({
  declarations: [
    PageContainerComponent,  
    InputBoxComponent,
    ComboBoxComponent,
    DateComponent,
    FilterComponent,
    TableComponent,
    CheckboxComponent,
    ToggleComponent,
    RadioComponent,
    ButtonComponent,
    TitleComponent,
    LookupComponent,
    SignatureComponent,
    SignatureButtonComponent,
    ListComponent,
    TextAreaComponent,
    OutputComponent,
    RowComponet,
    AutoRefreshSetting,
    AutoRefreshComp
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ShareModule,
    HttpModule,
    SignaturePadModule,
    IonicStorageModule.forRoot(),
    IonicModule.forRoot(PageContainerComponent, {
      menuType: 'push',
      platforms: {
        ios: {
          menuType: 'overlay',
        }
      }
    })
  ],
  schemas: [ NO_ERRORS_SCHEMA ],
  bootstrap: [ IonicApp ],
  entryComponents: [
    PageContainerComponent,
    FilterComponent,
    TableComponent,
    SignatureComponent,
    ListComponent,
    AutoRefreshComp
  ],
  providers: [
    StatusBar,
    SplashScreen,
    DynamicComponentService,
    PageContainerComponent,
    HttpService,
    CommunicationService,
    {
      provide: ErrorHandler, 
      useClass: IonicErrorHandler
    },
    ViewController
  ]
})
export class AppModule {}

组件创建弹出窗口

import { Component, OnInit, Host } from '@angular/core';
import { PageContainerComponent } from '../../component/pagecontainer/pagecontainer.component';
import { CommunicationService } from '../../service/communication-service/communication.service';
import { PopoverController } from 'ionic-angular/components/popover/popover-controller';
import {AutoRefreshComp} from './auto-refresh.component';
import { NavController, NavParams } from 'ionic-angular';

@Component({
    selector: 'autorefresh',
    template: `
           <div class="btn-group btn-group-filter-col-right js-btn-group-setting">
            <button ion-button outline (click)="openRefreshPageSetter($event)"> <ion-icon name="settings"></ion-icon> <ion-icon name="arrow-dropdown" class="icon-arrow"></ion-icon></button>
           </div>
    `
})

export class AutoRefreshSetting implements OnInit{

  public attributes : any;
  public enumVal : any;

  constructor(public popoverController: PopoverController,
    @Host() private pageContainer: PageContainerComponent,
    private commService: CommunicationService) {
  }

  openRefreshPageSetter(any){
    console.log("calling openRefreshPage() method.....");
    let popover = this.popoverController.create(AutoRefreshComp,{enumVal:this.attributes.enum,toggleVal:this.attributes.autorefreshToggle});
    popover.present({
      ev: any
    });

    popover.onDidDismiss(data =>{
      console.log("data got from popover:: ",data);
    })


  }

  ngOnInit(){
   console.log("Attributes ===> "+JSON.stringify(this.attributes));
  }



}

Answer 1

对我来说，解决方案是一个三步过程

请勿将ViewController添加为提供程序
在Modal构造函数中添加必要的参数

js constructor(public viewController: ViewController, public params: NavParams, public navCtrl: NavController, public platform: Platform) { this.itemList = params.get('itemList'); this.editItem = params.get('editItem'); }

确保同时在声明和entryComponents中声明ModalPage。

无法解析ViewController的所有参数：（？，？，？）

1 个答案: