javascript - Angular 2 : ตรวจสอบว่า routeName คือปัจจุบันหรือไม่

ฉันกำลังทำโครงการโดยใช้ Angular 2 และฉันกำลังพบปัญหา ฉันได้สร้างคอมโพเนนต์ลิงก์ขึ้นมา และฉันสามารถใช้งานมันได้แบบนี้ :

<cmp-link [routeName]="['Channel/Add']">Add channel</cmp-link>

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

this.isCurrentRoute = this.normalize(currentUrl) === this.routeName[0].toLowerCase();

คุณไม่ชอบมันเหรอ ? ผมก็เหมือนกัน ผมอยากจะตรวจสอบว่ามีเส้นทางใดกำลังถูกเปิดใช้งานอยู่โดยใช้ชื่อตัวมัน

(ในกรณีนี้ Channel/Add คือชื่อเส้นทาง)

ฉันไม่เข้าใจวิธีการทำสิ่งนี้ โดยใช้ชื่อของเส้นทาง ฉันได้ดูที่ Router และ Instruction แล้ว

คำตอบ #1

วิธีแก้ปัญหาสำหรับการใช้งานเราเตอร์เก่า

ฉันคิดว่านี่น่าจะทำงานได้

router.isRouteActive(router.generate(['Home']))

นี่ไม่ใช่วิธีแก้ปัญหาที่ดีนัก แต่เป็นวิธีเดียวที่ฉันรู้

router.isRouteActive ต้องการ Instruction และไม่สามารถจัดการกับสตริงได้ด้วยตัวเอง ดังนั้นคุณจึงจำเป็นต้องสร้าง Instruction นี้ด้วย router.generate()

แหล่งที่มา: https://angular.io/docs/ts/latest/api/router/Router-class.html

หมายเหตุ

ดังที่ @Clément Flodrops กล่าวถึง สิ่งนี้ใช้ได้กับโครงสร้างการกำหนดเส้นทางแบบเรียบเท่านั้น เท่าที่ผมเห็น ยังไม่สามารถทำให้เรื่องนี้เป็นระเบียบเรียบร้อยได้

บางทีอาจเป็นไปได้ที่จะทำงานกับ _childeRouter ส่วนตัวของ Router แต่การเข้าถึงคุณสมบัตินี้ เราจำเป็นต้อง override คลาส Router

ดังนั้นฉันจึงแนะนำให้รอสักระยะ บางทีเราเตอร์อาจรองรับการดำเนินการนี้ได้ในสักวันหนึ่ง

แก้ไข: เราเตอร์ใหม่ 3.0.0-alpha

ด้วยเราเตอร์ใหม่ คุณสามารถเพิ่ม routerLinkActive="class" และสิ่งนี้จะเพิ่มคลาส หาก routerLink กำลังใช้งานอยู่

สามารถใช้ได้เช่นกัน หาก routerLink ไม่ได้อยู่บนแท็กที่มี routerLinkActive โดยตรง:

<li role="menuitem" routerLinkActive="active">
    <a href="" [routerLink]="['/home']" title="home" class="control-icon">
        <span class="fa fa-home"></span>
    </a>
</li>