この記事は機械翻訳のミラー記事です。元の記事にジャンプするにはこちらをクリックしてください。

眺める: 11475|答える: 0

[角] Angular 4.x ルーターリンクコマンド

[リンクをコピー]
掲載地 2018/10/25 15:52:29 | | |
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クラス







先の:ここには本当に良い機能があります。お金を稼げる、それはプロモーションです。
次に:DZのオンライン決済契約不要プラグインをリリースし、個人テストが可能です。
免責事項:
Code Farmer Networkが発行するすべてのソフトウェア、プログラミング資料、記事は学習および研究目的のみを目的としています。 上記の内容は商業的または違法な目的で使用されてはならず、そうでなければ利用者はすべての結果を負うことになります。 このサイトの情報はインターネットからのものであり、著作権紛争はこのサイトとは関係ありません。 ダウンロード後24時間以内に上記の内容を完全にパソコンから削除してください。 もしこのプログラムを気に入ったら、正規のソフトウェアを支持し、登録を購入し、より良い本物のサービスを受けてください。 もし侵害があれば、メールでご連絡ください。

Mail To:help@itsvse.com