อะไรคือความแตกต่างระหว่าง[routerLink]และrouterLink? คุณควรใช้แต่ละตัวอย่างไร?
คำตอบ:
คุณจะเห็นสิ่งนี้ในคำสั่งทั้งหมด:
เมื่อคุณใช้วงเล็บหมายความว่าคุณกำลังส่งคุณสมบัติที่ผูกได้ (ตัวแปร)
<a [routerLink]="routerLinkVariable"></a>
ดังนั้นตัวแปรนี้ (routerLinkVariable) สามารถกำหนดได้ภายในคลาสของคุณและควรมีค่าดังนี้:
export class myComponent {
public routerLinkVariable = "/home"; // the value of the variable is string!
แต่ด้วยตัวแปรคุณมีโอกาสที่จะทำให้มันเป็นแบบไดนามิกใช่ไหม
export class myComponent {
public routerLinkVariable = "/home"; // the value of the variable is string!
updateRouterLinkVariable(){
this.routerLinkVariable = '/about';
}
ในกรณีที่ไม่มีวงเล็บคุณจะส่งสตริงเท่านั้นและคุณไม่สามารถเปลี่ยนได้มันเข้ารหัสยากและจะเป็นเช่นนั้นตลอดทั้งแอปของคุณ
<a routerLink="/home"></a>
อัพเดท:
ความพิเศษอื่น ๆ เกี่ยวกับการใช้วงเล็บเฉพาะสำหรับ routerLink คือคุณสามารถส่งผ่านพารามิเตอร์แบบไดนามิกไปยังลิงก์ที่คุณกำลังนำทางไป:
ดังนั้นการเพิ่มตัวแปรใหม่
export class myComponent {
private dynamicParameter = '129';
public routerLinkVariable = "/home";
การอัปเดต [routerLink]
<a [routerLink]="[routerLinkVariable,dynamicParameter]"></a>
เมื่อคุณต้องการคลิกที่ลิงค์นี้มันจะกลายเป็น:
<a href="https://stackoverflow.com/home/129"></a>
สมมติว่าคุณมี
const appRoutes: Routes = [
{path: 'recipes', component: RecipesComponent }
];
<a routerLink ="recipes">Recipes</a>
หมายความว่าการคลิกไฮเปอร์ลิงก์สูตรจะข้ามไปที่http: // localhost: 4200 / recipes
สมมติว่าพารามิเตอร์คือ 1
<a [routerLink] = "['/recipes', parameter]"></a>
หมายความว่าการส่งพารามิเตอร์ไดนามิก 1 ไปยังลิงก์จากนั้นคุณไปที่ http: // localhost: 4200 / recipes / 1
ลิงค์เราเตอร์
routerLink พร้อมวงเล็บและไม่มี - คำอธิบายง่ายๆ
ความแตกต่างระหว่าง routerLink = และ [routerLink] ส่วนใหญ่เหมือนพา ธ สัมพัทธ์และสัมบูรณ์
คล้ายกับ href คุณอาจต้องการที่จะนำทางไปยัง ./about.html หรือhttps://your-site.com/about.html
เมื่อคุณใช้โดยไม่มีวงเล็บคุณจะนำทางแบบสัมพัทธ์และไม่มีพารามิเตอร์
my-app.com/dashboard/client
"กระโดด" จากmy-app.com/dashboardไปที่my-app.com/dashboard/client
<a routerLink="client/{{ client.id }}" .... rest the same
เมื่อคุณใช้ routerLink กับวงเล็บแล้วคุณจะเรียกใช้แอพเพื่อนำทางแบบสัมบูรณ์และคุณสามารถเพิ่มพารามิเตอร์ได้ว่าปริศนาของลิงค์ใหม่ของคุณเป็นอย่างไร
ก่อนอื่นจะไม่รวม "ข้าม" จากแดชบอร์ด / ไปยังแดชบอร์ด / ไคลเอนต์ / รหัสไคลเอ็นต์และนำข้อมูลไคลเอนต์ / ไคลเอนต์ - id มาให้คุณซึ่งมีประโยชน์มากขึ้นสำหรับแก้ไขไคลเอ็นต์
<a [routerLink]="['/client', client.id]" ... rest the same
วิธีที่แน่นอนหรือวงเล็บ routerLink ต้องการการตั้งค่าส่วนประกอบและ app.routing.module.ts เพิ่มเติม
รหัสที่ไม่มีข้อผิดพลาดจะ "บอกข้อมูลเพิ่มเติม / วัตถุประสงค์ของ []" คืออะไรเมื่อคุณทำการทดสอบ เพียงตรวจสอบว่ามีหรือไม่มี [] กว่าที่คุณจะทดลองกับตัวเลือกซึ่ง - ตามที่กล่าวไว้ข้างต้น - ช่วยในการกำหนดเส้นทางแบบไดนามิก
ดูว่าโครงสร้าง routerLink คืออะไร