[解決済み] ルーターリンク]と[ルーターリンク]の違いについて
2022-03-15 02:29:37
質問事項
とはどのような違いがあるのでしょうか?
[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>
関連
-
[解決済み] コンストラクタとngOnInitの違いについて
-
[解決済み] formGroup' は 'form' の既知のプロパティではないため、バインドできません。
-
[解決済み] BehaviorSubjectとObservableの違い?
-
[解決済み] Angularの@Directiveと@Componentの比較
-
[解決済み] SubjectとBehaviorSubjectの違いは何ですか?
-
[解決済み】PromiseとObservablesの違いは何ですか?
-
[解決済み】@ViewChildと@ContentChildの違いは何ですか?
-
[解決済み】markForCheck()とdetectChanges()の違いは何ですか?)
-
[解決済み] Angular2の括弧、括弧、アスタリスクの違いは何ですか?
-
[解決済み] Angular 2 - モデル変更後、ビューが更新されない
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] ionic 5 - ngForがデータを表示しない
-
[解決済み] Angular HTMLバインディング
-
[解決済み] モジュール "@angular-devkit/build-angular" が見つかりませんでした。
-
[解決済み] 最後のページに戻るには
-
[解決済み】ルーターリンクでクエリパラメータを渡す方法
-
[解決済み] Angular + Material - データソース(mat-table)を更新する方法
-
[解決済み] Angular 4 HttpClient クエリパラメータ
-
[解決済み] '合成プロパティ @panelState を発見しました。BrowserAnimationsModule" か "NoopAnimationsModule" のどちらかを入れてください'。
-
[解決済み] Angular 2のパッシブリンク - <a href="">相当
-
[解決済み] AngularでngFor repeatをある数のアイテムに制限するにはどうすればよいですか?