[routerLink]とrouterLinkの違い

違いは何である[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>

更新：

特にrouterLinkでブラケットを使用することのもう1つの専門は、移動先のリンクに動的パラメーターを渡すことができることです。

新しい変数を追加する

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

[routerLink]の更新

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

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

  <a href="https://stackoverflow.com/home/129"></a>

あなたが持っていると仮定します

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

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

つまり、[レシピ]ハイパーリンクをクリックすると、http：// localhost：4200 / recipesにジャンプします

パラメータが1であると仮定します

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

つまり、動的パラメーター1をリンクに渡してから、http：// localhost：4200 / recipes / 1に移動し ます。

ルーターリンク

ブラケットとなしのrouterLink-簡単な説明。

routerLink =と[routerLink]の違いは、主に相対パスと絶対パスに似ています。

hrefと同様に、. /about.htmlまたはhttps://your-site.com/about.htmlに移動することができます。

大括弧なしで使用する場合は、相対およびパラメーターなしでナビゲートします。

my-app.com/dashboard/client

「ジャンプ」my-app.com/dashboardにmy-app.com/dashboard/client

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

ブラケット付きのrouterLinkを使用する場合は、アプリを実行して絶対ナビゲートし、パラメーターを追加して、新しいリンクのパズルをどのように進めることができますか

まず第一に、それはダッシュボード/からダッシュボード/クライアント/クライアントIDへの「ジャンプ」を含まず、クライアントの編集/クライアントに役立つクライアント/クライアントIDのデータをもたらします

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

絶対的な方法またはブラケットrouterLinkには、コンポーネントとapp.routing.module.tsの追加設定が必要です

エラーのないコードは、テストを行うときに「[/]の目的を詳しく説明します」と表示されます。[]の有無にかかわらずこれを確認してください。上記のように、ダイナミクスルーティングに役立つセレクターを試してみることもできます。

Angular.ioセレクター

routerLink構成を確認する

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