ฉันจะแสดง/ซ่อนองค์ประกอบการนำทางตามสถานะของผู้ใช้โดยใช้ Aurelia ได้อย่างไร

ฉันค่อนข้างใหม่กับ Aurelia และฉันชอบทุกนาทีของการเอนตัว ฉันใช้ Skeleton Navigation ของ Aurelia สำหรับแอป es6 และฉันกำลังสร้างแอปง่ายๆ ที่ผู้ใช้เข้าสู่ระบบและส่งเรื่องราวหลังจากให้รายละเอียดบางอย่างแล้ว โฟลว์ของแอปของฉันค่อนข้างง่าย:

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

แถบนำทางของฉันมี "หน้าแรก" และ "ส่งเรื่องราว" อย่างไรก็ตาม ฉันต้องการซ่อนรายการเมนู "ส่งเรื่องราว" จนกว่าผู้ใช้จะระบุหมายเลขโทรศัพท์ของเขาแล้ว โดยพื้นฐานแล้วในการส่งหมายเลขโทรศัพท์ หากฟังก์ชันคืนค่าเป็นจริง ฉันต้องการให้รายการเมนูปรากฏขึ้น

ฉันคิดว่ามีสองวิธีในเรื่องนี้ วิธีแรกคือการผูกรายการนำทางเข้ากับค่าจริงหรือเท็จ ขึ้นอยู่กับว่าหมายเลขโทรศัพท์ถูกส่งหรือไม่ และอีกวิธีคือการเพิ่มเส้นทางแบบไดนามิกเมื่อส่งหมายเลขโทรศัพท์สำเร็จ อันไหนดีกว่าที่จะใช้? และฉันจะซาบซึ้งอย่างยิ่งที่สะกิดไปในทิศทางที่ถูกต้อง

ฉันพยายามกำหนดตัวแปรบูลีนให้กับเส้นทาง แต่มันให้ผลลัพธ์ที่หลากหลาย ดูรหัสด้านล่าง (ฉันได้รวมเฉพาะรหัสที่เกี่ยวข้อง):

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

ฉันยังลองเพิ่มเส้นทางแบบไดนามิกแต่ไม่ได้ผล:

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();
}

โปรดช่วยฉันในเรื่องนี้ ขอขอบคุณสำหรับเวลาของคุณ!


person realnsleo    schedule 11.08.2016    source แหล่งที่มา


คำตอบ (1)


จริงๆ แล้วมีคุณสมบัติการตั้งค่าบนเส้นทาง คุณสามารถตั้งค่าคุณสมบัติการตั้งค่าให้กับวัตถุที่คุณสามารถจัดการได้ คุณสามารถใช้วัตถุนี้เมื่อคุณแสดงเส้นทางของคุณและให้แถบนำทางซ่อนไว้หากมีคุณสมบัติเฉพาะ

เช่น. {เส้นทาง: ผู้ใช้/:id' ชื่อ: ผู้ใช้ moduleId: './Aurelia/users nav: false ชื่อ: 'ผู้ใช้' การตั้งค่า: {isShown: true} }

ตรวจสอบบทความของฉันเกี่ยวกับการเชื่อมโยงในหัวข้อที่อธิบายการใช้คุณสมบัติการตั้งค่าอย่างละเอียดมากขึ้น

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

person mike gold    schedule 24.08.2016