[routerLink] 和 routerLink 的区别

Question

[routerLink] 和 routerLink 有什么区别？你应该如何使用每一个？

Answer 1

您会在所有指令中看到这一点：

当您使用括号时，这意味着您正在传递一个可绑定的属性（一个变量）。

  <a [routerLink]="routerLinkVariable"></a>

所以这个变量 (routerLinkVariable) 可以在你的 class 中定义，它的值应该如下所示：

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 使用括号的另一个特点是您可以将动态查询参数传递给您要导航到的 link：

所以添加一个新变量

export class myComponent {
        private dynamicQueryParameter = '129';
        public routerLinkVariable = "/home";

正在更新 [routerLink]

  <a [routerLink]="[routerLinkVariable]"[queryParams]="{unit: dynamicQueryParameter}"></a>

当你想点击这个link时，它会变成：

  <a href="/home?unit=129"></a>

Answer 2

假设你有

const appRoutes: Routes = [
  {path: 'recipes', component: RecipesComponent }
];

<a routerLink ="recipes">Recipes</a>

表示点击Recipes hyperlink会跳转到http://localhost:4200/recipes

假设参数为1

<a [routerLink] = "['/recipes', parameter]"></a>

表示传递动态参数，1给link，然后导航到 http://localhost:4200/recipes/1

Answer 3

路由器Link

routerLink 带括号和 none - 简单解释。

routerLink= 和 [routerLink] 的区别主要是相对路径和绝对路径。

与 href 类似，您可能希望导航至 ./about.html 或 https://your-site.com/about.html。

当您使用不带括号的方式时，您将进行相对导航且不带参数；

我的应用程序。com/dashboard/client

"jumping" 从 my-app.com/dashboard 到 my-app.com/dashboard/client

<a routerLink="client/{{ client.id }}" .... rest the same

当你使用带括号的路由器Link然后你执行app来绝对导航你可以添加参数你的新link

的谜题怎么样

首先它不会包含从 dashboard/ 到 dashboard/client/client-id 的 "jump" 并为您带来 client/client-id 的数据，这对 EDIT CLIENT

更有帮助

<a [routerLink]="['/client', client.id]" ... rest the same

绝对方式或括号路由器Link需要额外设置您的组件和app.routing.module.ts

没有错误的代码将在您进行测试时"tell you more/what is the purpose of []"。只需在有或没有 [] 的情况下检查它。比起你可以尝试选择器——如上所述——它有助于动态路由。

Angular.io Selectors

看看路由器是什么Link构造

https://angular.io/api/router/RouterLink#selectors

Answer 4

路由器LINK指令：

[routerLink]="link"                  //when u pass URL value from COMPONENT file
[routerLink]="['link','parameter']" //when you want to pass some parameters along with route

 routerLink="link"                  //when you directly pass some URL 
[routerLink]="['link']"              //when you directly pass some URL

[routerLink] 和 routerLink 的区别

Difference between [routerLink] and routerLink

routes

routerlink

angular

angular-routerlink