[routerLink] 和 routerLink 的区别 [英] Difference between [routerLink] and routerLink

问题描述

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

What is the difference between [routerLink] and routerLink ? How should you use each one?

推荐答案

您将在所有指令中看到这一点:

You'll see this in all the directives:

当您使用方括号时，意味着您正在传递一个可绑定的属性(一个变量).

When you use brackets, it means you're passing a bindable property (a variable).

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

所以这个变量(routerLinkVariable)可以在你的类中定义，它应该有一个像下面这样的值:

So this variable (routerLinkVariable) could be defined inside your class and it should have a value like below:

export class myComponent {

    public routerLinkVariable = "/home"; // the value of the variable is string!

但是有了变量，您就有机会让它变得动态，对吗?

But with variables, you have the opportunity to make it dynamic right?

export class myComponent {

    public routerLinkVariable = "/home"; // the value of the variable is string!


    updateRouterLinkVariable(){

        this.routerLinkVariable = '/about';
    }

在没有括号的情况下，您只能传递字符串并且无法更改它，它是硬编码的，并且在整个应用程序中都是如此.

Where as without brackets you're passing string only and you can't change it, it's hard coded and it'll be like that throughout your app.

<a routerLink="/home"></a>

更新:

专门为 routerLink 使用括号的另一个特点是您可以将动态查询参数传递给您要导航到的链接:

The other speciality about using brackets specifically for routerLink is that you can pass dynamic query parameters to the link you're navigating to:

所以添加一个新变量

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

更新 [routerLink]

Updating the [routerLink]

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

当你想点击这个链接时，它会变成:

When you want to click on this link, it would become:

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

这篇关于[routerLink] 和 routerLink 的区别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！