且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

Angular应用的路由指令RouterLink

更新时间:2022-09-09 16:43:35

Angular应用的路由指令RouterLinkapp Component html源代码:

<h1>{{title}}</h1>
<nav>
    <a routerLink="/heroes">Heroes</a>
  </nav>
<router-outlet></router-outlet>
<app-messages></app-messages>

A routerLink attribute is set to “/heroes”, the string that the router matches to the route to HeroesComponent. The routerLink is the selector for the RouterLink directive that turns user clicks into router navigations. It’s another of the public directives in the RouterModule.


HTML原生标签a的属性routerlLink,是RouterLink指令的选择器,将用户点击转换成navigation. RouterLink是RouterModule里的公有指令。


运行时效果:点击了超链接后,会跳转到localhost:4200/heroes:

Angular应用的路由指令RouterLink

Angular应用的路由指令RouterLink

RouterLink is an inbuilt Angular Directive that lets you link to specific routes in your app. In a SPA(single-page application), you change what the user sees by showing or hiding portions of the display that correspond to particular components, rather than going out to the server to get a new page.


RouterLink 是一个内置的 Angular 指令,可让您链接到应用程序中的特定路由。 在 SPA(单页应用程序)中,您可以通过显示或隐藏与特定组件对应的显示部分来更改用户看到的内容,而不是前往服务器获取新页面。


RouterModule provides RouterLink directive in Angular. The RouterModule adds router directives and providers. RouterLink lets us link to the specific routes in our angular application.


RouterModule 在 Angular 中提供 RouterLink 指令。 RouterModule 添加路由器指令和提供程序。 RouterLink 允许我们链接到我们的 angular 应用程序中的特定路由。


When applied to an element in a template, makes that element a link that initiates navigation to a route. Navigation opens one or more routed components in one or more locations on the page.


当应用于模板中的元素时,使该元素成为启动导航到路线的链接。 导航会在页面上的一个或多个 位置打开一个或多个路由组件。

Angular应用的路由指令RouterLink

Angular应用的路由指令RouterLink