如何创建 Angular 内部 URL 超链接？

Question

如何为内部 link 创建 URL？

说用户在客户组件页面上，想转到产品页面。

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

基础URL也可能会改变，这取决于端口号，环境例如：

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有更好的选择吗？

资源：

Answer 1

这是你应该做的：

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

使用 routerLink 指令，以便 angular 路由器可以导航到正确的组件。不要对内部链接使用 href 属性，因为这会进行完整的回发，从而重新加载您的应用程序。

How to Create Angular Internal URL Hyperlink?