在navtrl.push()中承诺错误

Question

我正在尝试构建一个简单的功能，该功能可以让我浏览应用程序中的不同页面。我希望能够传递我想在HTML代码中使用的页面的名称。到目前为止，我所做的是

在我的家中

`goToPage(test){
    console.log('clicked! '+test);
    this.navCtrl.push(test);
}`

在我的家中.html

<button ion-fab color="light" (click)='goToPage("ChooseCharacterPage")'>

一切都加载，但是当我单击时，我得到

invalid page component: ChooseCharacterPage
convertToView @ nav-util.js:23
NavControllerBase.push @ nav-controller-base.js:54
HomePage.goToPage @ home.ts:19
View_HomePage0.handleEvent_13 @ /AppModule/HomePage/component.ngfactory.js:193
(anonymous) @ view.js:408
(anonymous) @ dom_renderer.js:276
t.invokeTask @ polyfills.js:3
onInvokeTask @ ng_zone.js:227
t.invokeTask @ polyfills.js:3
e.runTask @ polyfills.js:3
invoke @ polyfills.js:3
error_handler.js:47 EXCEPTION: Uncaught (in promise): false
ErrorHandler.handleError @ error_handler.js:47
IonicErrorHandler.handleError @ ionic-error-handler.js:56
next @ application_ref.js:272
schedulerFn @ async.js:82
SafeSubscriber.__tryOrUnsub @ Subscriber.js:223
SafeSubscriber.next @ Subscriber.js:172
Subscriber._next @ Subscriber.js:125
Subscriber.next @ Subscriber.js:89
Subject.next @ Subject.js:55
EventEmitter.emit @ async.js:74
NgZone.triggerError @ ng_zone.js:278
onHandleError @ ng_zone.js:257
t.handleError @ polyfills.js:3
e.runGuarded @ polyfills.js:3
r @ polyfills.js:3
i @ polyfills.js:3
invoke @ polyfills.js:3
error_handler.js:52 ORIGINAL STACKTRACE:
ErrorHandler.handleError @ error_handler.js:52
IonicErrorHandler.handleError @ ionic-error-handler.js:56
next @ application_ref.js:272
schedulerFn @ async.js:82
SafeSubscriber.__tryOrUnsub @ Subscriber.js:223
SafeSubscriber.next @ Subscriber.js:172
Subscriber._next @ Subscriber.js:125
Subscriber.next @ Subscriber.js:89
Subject.next @ Subject.js:55
EventEmitter.emit @ async.js:74
NgZone.triggerError @ ng_zone.js:278
onHandleError @ ng_zone.js:257
t.handleError @ polyfills.js:3
e.runGuarded @ polyfills.js:3
r @ polyfills.js:3
i @ polyfills.js:3
invoke @ polyfills.js:3
error_handler.js:53 Error: Uncaught (in promise): false
    at s (polyfills.js:3)
    at polyfills.js:3
    at Object.ti.reject (nav-controller-base.js:187)
    at NavControllerBase._queueTrns (nav-controller-base.js:197)
    at NavControllerBase.push (nav-controller-base.js:52)
    at HomePage.goToPage (home.ts:19)
    at CompiledTemplate.proxyViewClass.View_HomePage0.handleEvent_13 (/AppModule/HomePage/component.ngfactory.js:193)
    at CompiledTemplate.proxyViewClass.<anonymous> (view.js:408)
    at HTMLButtonElement.<anonymous> (dom_renderer.js:276)
    at t.invokeTask (polyfills.js:3)
ErrorHandler.handleError @ error_handler.js:53
IonicErrorHandler.handleError @ ionic-error-handler.js:56
next @ application_ref.js:272
schedulerFn @ async.js:82
SafeSubscriber.__tryOrUnsub @ Subscriber.js:223
SafeSubscriber.next @ Subscriber.js:172
Subscriber._next @ Subscriber.js:125
Subscriber.next @ Subscriber.js:89
Subject.next @ Subject.js:55
EventEmitter.emit @ async.js:74
NgZone.triggerError @ ng_zone.js:278
onHandleError @ ng_zone.js:257
t.handleError @ polyfills.js:3
e.runGuarded @ polyfills.js:3
r @ polyfills.js:3
i @ polyfills.js:3
invoke @ polyfills.js:3

让我感到困惑的是承诺问题，因为该变量通过按钮的单击传递。不应该只有在不确定的情况下以及何时才出现承诺问题？

Answer 1

就像@suraj所说，您需要将组件发送到推送方法（而不是字符串）。但是，也许更简单的方法可能是在您的TS代码中声明属性，分配ChooseCharacterPage组件类：

public chooseCharacterPage: any = ChooseCharacterPage;
// ...
goToPage(test: any){
    this.navCtrl.push(test);
}

然后在您的视图中您可以使用该变量：

<button ion-fab color="light" (click)='goToPage(chooseCharacterPage)'>

请注意，在HTML中，我们现在正在使用该属性（名称始于小写，而不是引号之间）。

Answer 2

您没有在代码中的click事件中传递ChooseCharacterPage：

<button ion-fab color="light" (click)='goToPage("ChooseCharacterPage")'>

您实际上是在传递字符串字面，显然不是一个组件。对于通过对象，您将没有任何内部引号。如果页面组件对象在视图中不存在，则应直接在组件侧导入并调用

this.navCtrl.push(ChooseCharacterPage)

在事件函数调用中，无需将其作为参数传递。或在您的功能中

gotoPage(page:string){
switch(page){
  case "ChooseCharacterPage": 
    this.navCtrl.push(ChooseCharacterPage);
    break;
  //other cases
  }
}