RouterLinkコマンドの紹介
RouterLinkコマンドはアプリケーションの特定の部分にリンクすることを可能にします。 リンクが静的であれば、以下の方法でコマンドを使用できます:
動的な価値を持つリンクアドレスを生成する必要がある場合は、パスセグメントの配列と各セグメントのパラメータを渡すことができます。 例えば、['/team', teamId, 'user', userName, {details: true}]の配列を使うと、/team/11/user/bobへのリンクを生成したい場合、 details=true 。
複数の静的セグメントを1つに統合することも可能です。例:['/team/11/user', userName, {details: true}]。
最初のパス断片は /、./、または と定義できます。 / 始まり:
- もし/で始まるなら、ルートはルートから上向きに見始めます
- もし./で始まるか、使われていない場合、ルートは現在アクティブな子ルートから上向きに見始めます
- もし以下から始めるなら: /が始まり、ルートは次のレベルの検索に進みます
クエリパラメータやフラグメントは以下の方法で設定できます:
RouterLinkコマンドは、上記の入力パラメータに基づいて以下のリンクを生成します:/user/bob#education?debug=true。 さらに、queryParamsHandling プロパティを使ってクエリパラメータの扱い方を宣言できます。利用可能なオプションは以下の通りです:
- merge - 既存のqueryParamsを現在のqueryParamsにマージします
- preserve - 現在のqueryParamsを保存する
- デフォルト('') - クエリパラメータのみを使用する
具体的な使用例は以下の通りです。
RouterLinkコマンドの詳細説明
RouterLinkコマンド定義
RouterLinkコマンド入力プロパティ
URLに関連するクエリパラメータを設定します @Input() queryParams: {[k: string]: any};
URL上のハッシュフラグメントを設定します @Input() fragment: string;
クエリパラメータの処理モードを設定する:マージ、保持、デフォルト @Input() queryParamsHandling: QueryParamsHandling;
断片を保持するかどうかの集合 @Input() preserveFragment: boolean;
ページナビゲーションを設定する際、履歴に新しいステータスを追加するかどうか @Input() skiplocatio{filter}nChange: boolean;
ページナビゲーションを設定する際に、履歴の現在の状態を置き換えるかどうかを判断します @Input() replaceUrl: boolean;
コマンドパラメータ情報を設定します。例えば、['/user/bob'] @Input() set routerLink(commands: any[]|string) { もし(コマンド != null){ this.commands = Array.isArray(commands) ? コマンド:[コマンド]; } そうでなければ { this.commands = []; }
}
RouterLinkコマンドバインディング
イベントバインディング
RouterLinkクラス
@Attribute() @Attribute('attributeName')デコレーター:コマンドホスト要素のattributeName属性名に対応する属性値を取得するために使われます。
タブインデックス tabindexプロパティは、タブキーがナビゲーションに使用される場合の要素のタブキーの制御順序を指定します。
以下の要素はタブインデックス属性をサポートします:<a>、<area>、<button>、 <input><object><select> <textarea> および。
タブインデックスの構文:
RouterLinkクラス
RouterLinkクラス
RouterLinkWithHrefコマンド
RouterLinkWithHref 指令
RouterLinkWithHref 指令入力プロパティ
RouterLinkWithHrefコマンド
属性バインディング
<a> タグは、あるページから別のページへリンクするためのハイパーリンクを定義します。 <a> タグには2つの重要な属性があります。
href - リンクが先につながるページのURLアドレスを指定します。 href属性を使用しない場合、ダウンロード、メディア、rel、ターゲット、type属性の各属性は使用できません。
target - リンクされたページのブラウザウィンドウの開き方を指定し、そのパラメータ値は主に以下の通りです。
_blank - 新しいブラウザウィンドウでターゲットドキュメントを読み込む。
_parent - この目的により、文書はリンクで参照されたフレームを含む親ウィンドウまたはフレームセットに読み込まれます。 もしこの参照がウィンドウ内やトップレベルのフレームワークにあるなら、それはターゲット_selfと同等です。
_self - このターゲットの値は、ターゲットを指定しないすべてのラベルのデフォルトターゲットであり<a>、これによりターゲットドキュメントは同じフレームまたはウィンドウ内でソースドキュメントとして読み込まれ表示されます。 このターゲットは冗長で不要で、<base>ドキュメントタイトルタブのターゲット属性で使わない限り不要です。
_top - この目標により、ドキュメントはハイパーリンクを含むウィンドウを読み込み、_topターゲットを使うと含まれているフレームをすべて消去し、ブラウザウィンドウ全体でドキュメントが読み込まれます。
イベントバインディング
MouseEventは、ユーザーがポインタデバイス(マウスなど)と操作した際に発生するイベントであり、一般的なイベントにはクリック、dblclick、mouseup、mousedownのイベントがあります。 MouseEventオブジェクトには、ユーザーが押したマウスボタンを表すボタン属性が含まれており、可能な属性値は以下の通りです。
- 0 - メインボタンを押します。通常は左クリックのボタンを指します。
- 1 - 補助ボタンを押す。通常はマウスホイールを指す。
- 2 - 2つ目のキーを押します。通常は右クリックを指します。
- 3 - 4番目のボタンを押します。通常はブラウザの戻るボタンを指します。
- 4 - 5番目のボタンを押します。通常はブラウザの転送ボタンを指します。
左利き用に設定されたマウスでは、キーストロークは逆になります。 この場合、値は右から左へ読み出されます。 上記の例コードでは、マウスイベントオブジェクトのctrlKeyとmetaKeyプロパティにもアクセスしており、これら2つのプロパティに加えてaltKeyとshiftKeyのプロパティも含んでいます。 これらの属性は以下に説明します。
- MouseEvent.ctrlKey - マウスイベントがトリガーされたときにControlキーを押すとtrueを返します。
- MouseEvent.metaKey - マウスイベントがトリガーされた際に(Window - ⊞, Mac - ⌘ Command)キーが押された場合、trueを返します。
- MouseEvent.altKey - (Window - alt、Mac - Option、または⌥)キーが押された場合、マウスイベントがトリガーされるとtrueを返します。
- MouseEvent.shiftKey - マウスイベントがトリガーされた際にシフトキーを押すとtrueを返します。
ctrlキーを押してからタブをクリックすると、<a>現在のURLアドレスを使って新しいタブページが作成されます。 metaKeyを押してから<a>タブをクリックすると、現在のページが更新されます。 したがって、onClick()メソッドでは対応する判断が行われます。
RouterLinkWithHrefコマンドのライフサイクル
ngOnChanges()
ngOnDestroy()
RouterLinkWithHrefクラス
RouterLinkWithHrefクラス
RouterLinkWithHrefクラス
RouterLinkActiveコマンドの紹介
RouterLinkActive指令により、リンクされたルートがアクティブになった際に要素にCSSクラスを追加できます。 以下の例を見てみましょう:
URLアドレスが/userまたは/user/bobの場合、アクティブリンククラスが<a>タグに追加されます。 URLが変更されると、アクティブリンククラスは自動的にタグから削除されます<a>。 以下のように複数のクラスを同時に追加することも可能です:
ルーターLinkActiveコマンドを適用する際、ルーターLinkActiveOptionsパラメータを使ってURLのマッチング方法を設定することもできます。以下のように。
{exact: true}パラメータが設定されている場合、アクティブリンククラスはURLアドレスが正確に一致する場合のみタグに追加されます<a>。 また、テンプレート変数にRouterLinkActiveインスタンスを割り当て、命令指令のisActive状態を指示的に確認することもできます:
最後に、RouterLinkの親要素にもRouterLinkActiveコマンドを適用できます。 例としては以下のものがあります:
上記の例では、URLが/user/jimまたは/user/bobとして指定されている場合、<div>対応する要素にアクティブリンククラスが追加されます。
RouterLinkActiveコマンドの詳細説明
RouterLinkActive コマンド定義
RouterLinkActive コマンド入力プロパティ
RouterLinkActive コマンドライフサイクル
ngAfterContentInit()
ngOnChanges()
ngOnDestroy()
RouterLinkActiveクラス
RouterLinkActiveクラス
RouterLinkActiveクラス
|