如何創建 Angular 內部 URL 超鏈接？

Question

如何為內部鏈接創建 URL？

在客戶組件頁面上說用戶，並希望 go 到產品頁面。

http://localhost:4200/app/customer

組件中有一個文本框說明產品：它們如何路由到 Angular Typescript 和 HTML 中的產品頁面？

http://localhost:4200/app/product/{ProductName}

http://localhost:4200/app/product/ComputerKeyboard

http://localhost:4200/app/product/Book

baseURL 也可能會改變，具體取決於端口號、環境，例如：

http://www.TestEStore.com/app/product/ComputerKeyboard

http://www.TestEStore.com/app/product/Book

它還需要進行 html 編碼，因為 html 編碼例如空格被編碼為 %20 等

嘗試編輯代碼：

let productName: string = 'Computer Keyboard';

<a href="{{Whats the variable name?}}/product/{{this.productName)}}">Computer Keyboard</a>

Angular 有更好的選擇嗎？

資源： 如何在 Angular 2 中創建指向外部 URL 的鏈接

Answer 1

這是你應該做的：

<a [routerLink]="['/app/product/', productName]">Product</a>

使用 routerLink 指令，以便 angular 路由器可以導航到正確的組件。 不要對內部鏈接使用 href 屬性，因為這將執行完整的回發，從而重新加載您的應用程序。