[解決済み] ルーターリンク]と[ルーターリンク]の違いについて

質問事項

とはどのような違いがあるのでしょうか？ [routerLink] と routerLink ? それぞれどのように使うべきでしょうか？

どのように解決するのですか？

すべてのディレクティブに表示されます。

ブラケットを使用しているときは、バインド可能なプロパティ（変数）を渡していることを意味します。

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

この変数(routerLinkVariable)は、クラス内で定義することができ、以下のような値を持つはずです。

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>

UPDATE :

ルーターリンク専用のブラケットを使うことのもう一つの特徴は、ナビゲート先のリンクに動的なクエリパラメータを渡すことができることです。

そのため、新しい変数を追加することで

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

ルーターリンク]を更新する

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

このリンクをクリックする場合は、次のようになります。

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