承诺错误navTrl.push（）

Question

我试图建立一个简单的函数，让我浏览我的应用程序中的不同页面。我希望能够通过我想要在我的HTML代码中去的页面的名称。我所做的，到目前为止是

在我home.ts

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

在我home.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 

让我感到困惑的是承诺问题，因为通过点击按钮来传递变量。只有当var未定义时，才会出现承诺问题？

Answer 1

就像@suraj说，你需要一个组件发送到push方法（而不是字符串）。但也许更简单的方法可能是在你的TS码申报了财产，分配ChooseCharacterPage组件类：

public chooseCharacterPage: any = ChooseCharacterPage; 

// ... 

goToPage(test: any){ 
    this.navCtrl.push(test); 
} 

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

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

请注意在html中，我们现在使用该属性（名称以小写开头，并且不在引号之间）。

Answer 2

你是不是经过ChooseCharacterPage在click事件代码：

<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 
    } 
}