Wie kann ich Navigationselemente basierend auf einem Benutzerstatus mit Aurelia anzeigen/verbergen?

Question

Ich bin ziemlich neu in Aurelia und ich liebe jede Minute der geneigten Kurve. Ich verwende Aurelias Skeleton Navigation für es6-Apps und arbeite gerade an einer einfachen App, bei der sich ein Benutzer anmeldet und eine Geschichte abgibt, nachdem er bestimmte Details angegeben hat. Der Fluss meiner App ist ziemlich einfach:

Login Screen --> Screen where user provides phone number --> User submit's story 

Meine Navigationsleiste hat "Home" und "Submit Story". Ich möchte jedoch den Menüpunkt "Geschichte senden" ausblenden, bis der Benutzer seine Telefonnummer angegeben hat. Also im Grunde auf Telefonnummer senden, wenn die Funktion wahr zurückgibt, brauche ich den Menüpunkt angezeigt werden.

Ich denke, es gibt zwei Möglichkeiten, dies zu tun. Einer besteht darin, die Navigationselemente je nach dem, ob die Telefonnummer übermittelt wird, an einen wahren oder falschen Wert zu binden, und der andere besteht darin, die Route bei erfolgreicher Übermittlung der Telefonnummer dynamisch hinzuzufügen. Welcher ist besser zu benutzen? Und ich würde einen Anstoss in die richtige Richtung sehr schätzen.

Ich habe versucht, den Routen eine boolesche Variable zuzuordnen, aber es gab mir gemischte Ergebnisse. Sehen Sie den Code unten (Ich habe gerade den zugehörigen Code enthalten):

check_phone = false; 

configureRouter(config, router) { 
    config.title = 'Aurelia'; 
    config.map([ 
     {route: ['', 'home'], name: 'home', moduleId: 'home', nav: check_phone, title: 'Home'}, 
     {route: 'story', name: 'story', moduleId: 'story', nav: check_phone, title: 'Submit a Story'} 
    ]); 
    config.mapUnknownRoutes('/'); 
    this.router = router; 
} 

phone_submit() { 
    if(success) this.check_phone = true; 
} 

Ich habe versucht, auch die Route dynamisch hinzugefügt, aber es funktioniert nicht:

configureRouter(config, router) { 
    config.title = 'Aurelia'; 
    config.map([ 
     {route: ['', 'home'], name: 'home', moduleId: 'home', nav: check_phone, title: 'Home'}, 
    ]); 
    config.mapUnknownRoutes('/'); 
    this.router = router; 
} 

phone_submit() { 
    if(success) 
     this.router.addRoute({route: 'story', name: 'story', moduleId: 'story', nav: true, title: 'Submit a Story'}) 
     this.router.refreshNavigation(); 
} 

Bitte helfen Sie mir in diesem. Vielen Dank für Ihre Zeit!

Answer 1

Es gibt tatsächlich eine Einstellungseigenschaft auf der Route. Sie können die Einstellungseigenschaft auf ein Objekt festlegen, in dem Sie Änderungen vornehmen können. Sie können dieses Objekt verwenden, wenn Sie Ihre Route rendern und die Navigationsleiste ausblenden, wenn es eine bestimmte Eigenschaft hat.

z.B. {Route: Benutzer /: id ' Name: user, moduleId:' ./Aurelia/users, nav: false, Titel: 'User', Einstellungen: {isShown: true}}

Überprüfen Sie meinen Artikel auf Linked-In zu dem Thema, das die Verwendung der Einstellungseigenschaft genauer erläutert;

https://www.linkedin.com/pulse/routing-aurelia-framework-mike-gold?trk=mp-author-card