_co.gotoArchivePage不是函数

Question

我对ionic还是很陌生，我正在尝试开发3.9版本的todo应用程序。我尝试创建一个fab按钮，该按钮将导致我进入“ ArchiveTodos”页面，但是每次单击fab按钮时，都会得到以下结果：

intellij {
    version '2018.1.4'
    pluginName 'ElyePlugin'
    plugins 'kotlin'
    updateSinceUntilBuild false
    alternativeIdePath "/Applications/Android Studio.app/Contents/"
}

环境：

Error

  Runtime Error
  co.gotoArchivePage is not a function
  Stack
  TypeError: _co.gotoArchivePage is not a function
 at Object.eval [as handleEvent] 
    (ng:///AppModule/HomePage.ngfactory.js:152:31)
    at handleEvent (http://localhost:8100/build/vendor.js:13963:155)
    at callWithDebugContext (http://localhost:8100/build/vendor.js:15472:42)
    at Object.debugHandleEvent [as handleEvent] 
    (http://localhost:8100/build/vendor.js:15059:12)...

home.ts：

    Ionic Framework: 3.9.2
    Ionic App Scripts: 3.1.11
    Angular Core: 5.2.11
    Angular Compiler CLI: 5.2.11
    Node: 8.9.3
    OS Platform: Windows 10
    Navigator Platform: Win32
    User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 
    (KHTML, like Gecko) Chrome/68... Safari/537.36

home.html：

    import { Component } from ‘@angular/core’;
    import { NavController, AlertController, reorderArray } from ‘ionic- 
    angular’;

    import { TodoProvider } from “…/…/providers/todo/todo”;
    import { ArchivedTodosPage } from “…/archived-todos/archived-todos”;

    @Component({
    selector: ‘page-home’,
    templateUrl: ‘home.html’
    })
    export class HomePage {
    public todos = [];

    public reorderIsEnabled = false;
    constructor(private todoProvider: TodoProvider, public navCtrl: 
    NavController, private alertController : AlertController, public 
    archivedtodosPage : ArchivedTodosPage) {
    this.todos = this.todoProvider.getTodos();
    }

    goToArchivePage(){
    this.navCtrl.push(ArchivedTodosPage);
    }

    toggleReorder(){
    this.reorderIsEnabled = !this.reorderIsEnabled;
    }

    itemReordered($event){
    reorderArray(this.todos, $event);
    }

    openTodoAlert(){
    let addTodoAlert = this.alertController.create({
    title: “Add A Todo”,
    message: “Enter your Todo”,
    inputs: [
    {
    type: “text”,
    name: “addTodoInput”
    }
    ],
    buttons: [
    {
    text: “Cancel”
    },
    {
    text: “Add Todo”,
    handler: (inputData)=> {
    let todoText;
    todoText = inputData.addTodoInput;
    this.todoProvider.addTodo(todoText);

                   }
                 }
                ]
          });
          addTodoAlert.present();
    }

    }

app.module.ts：

    the Real Todo Edit Done
         </ion-icon>
       </button>
    </ion-buttons>
    {{todo}}
              </ion-icon>
            </button>

          </ion-item-options>
    </ion-item-sliding>



    </ion-list>
     <button ion-fab (click)="gotoArchivePage()">

      <ion-icon name="archive">

      </ion-icon>

     </button>

app.component.ts代码：

    import { BrowserModule } from ‘@angular/platform-browser’;
    import { ErrorHandler, NgModule } from ‘@angular/core’;
    import { IonicApp, IonicErrorHandler, IonicModule } from ‘ionic-angular’;
    import { SplashScreen } from ‘@ionic-native/splash-screen’;
    import { StatusBar } from ‘@ionic-native/status-bar’;

    import { MyApp } from ‘./app.component’;
    import { HomePage } from ‘…/pages/home/home’;
    import { TodoProvider } from “…/providers/todo/todo”;
    import { HttpClientModule } from ‘@angular/common/http’;
    import { ArchivedTodosPage } from “…/pages/archived-todos/archived-todos”;

    @NgModule({
    declarations: [
    MyApp,
    HomePage,
    ArchivedTodosPage
    ],
    imports: [
    HttpClientModule,
    BrowserModule,
    IonicModule.forRoot(MyApp)
    ],
    bootstrap: [IonicApp],
    entryComponents: [
    MyApp,
    HomePage,
    ArchivedTodosPage
    ],
    providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    TodoProvider
    ]
    })
    export class AppModule {}

由于您一直在努力解决此问题，我将非常感谢您的帮助