web-dev-qa-db-ja.com

[routerLink]とrouterLinkの違い

[routerLink]とrouterLinkの違いは何ですか？どのようにあなたはそれぞれを使うべきですか？

angularroutesrouterlinkangular-routerlink
60
Eslam Tahoon

これはすべてのディレクティブで見られます。

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

  <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="/home/129"></a>
112
Milad

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

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

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

Recipesハイパーリンクをクリックすると、 http：// localhost：4200/recipes にジャンプします。

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

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

これは、動的パラメータ1をリンクに渡してから、 http：// localhost：4200/recipes/1 に移動することを意味します。

13
matthew chick