versprechen Fehler in navTrl.push()

Question

Ich versuche, eine einfache Funktion zu bauen, die mich durch verschiedene Seiten in meiner App navigieren kann. Ich möchte in der Lage sein, den Namen der Seite, wo ich in meinem HTML-Code gehen möchte. Was ich bisher getan habe, ist

In meinem home.ts

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

In meinem home.html

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

Alle Last, aber wenn ich auf mich

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 

Was mich verwirrt, ist das Versprechensproblem, da die Variable mit einem Klick auf den Button übergeben wird. Wäre nicht ein Versprechensproblem nur dann zu erwarten, wenn die Var undefiniert ist?

Answer 1

Genau wie @suraj sagt, müssen Sie eine Komponente an die Push-Methode senden (und kein String). Aber vielleicht ein einfacherer Ansatz könnte sein, eine Eigenschaft in Ihrem ts Code zu erklären, die ChooseCharacterPage Komponentenklasse zuweisen:

public chooseCharacterPage: any = ChooseCharacterPage; 

// ... 

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

Und dann Ihrer Ansicht nach können Sie diese Variable verwenden:

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

Bitte beachten Sie, dass Im HTML verwenden wir jetzt die Eigenschaft (der Name beginnt mit Kleinbuchstaben und steht nicht zwischen Anführungszeichen).

Answer 2

Sie passieren nicht die ChooseCharacterPage im click Ereignis in Ihrem Code:

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

Sie passieren tatsächlich eine Stringliteral, die offensichtlich nicht Bestandteil ist. Zum Übergeben von Objekten haben Sie keine inneren Anführungszeichen. Wenn die Seite Komponentenobjekt ist in der Ansicht nicht vorhanden Sie direkt in der Komponentenseite importieren sollte und

this.navCtrl.push(ChooseCharacterPage)

ohne es als Parameter bei Funktionsaufruf rufen vorbei. oder in Ihrer Funktion

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