角度ルートの強調表示の実装手順の詳細な説明

今回は、angular routing highlighting の実装手順について詳しく説明します。angular routing の強調表示を実装する際の 注意事項 は何ですか? 以下は実際のケースです。見てみましょう。

ルートのハイライト表示とは何ですか?メリットは何ですか？

バックエンド管理システムで作業している場合、左側にルートの行が表示されます

ナビゲーションをクリックして別のページに入ります。その後、このルートが配置されているdom要素に現在の場所を示すスタイルが追加されます。 。

でも、更新すると、このスタイルがなくなっていることがわかります…

どうすればいいですか？

ルートの強調表示を採用: ルートがアクティブ化されると、ルートを追加する dom 要素にクラスを追加できるようになります。このスタイルは、URL が変更された場合にのみ削除されます。

現在のルートがアクティブ化されているか、現在のルートがアクティブ化された

状態にありますこれは、ページの URL 内のルートと現在の dom タグ内のルートが一致する必要があることを意味します。

// 用法概览
@Directive({
  selector: '[routerLinkActive]',
  exportAs: 'routerLinkActive'
})
class RouterLinkActive implements OnChanges, OnDestroy, AfterContentInit {
 constructor(router: Router, element: ElementRef, renderer: Renderer2, cdr: ChangeDetectorRef)
 links: QueryList<RouterLink>
 linksWithHrefs: QueryList<RouterLinkWithHref>
 get isActive: boolean
 routerLinkActiveOptions: {...}
 set routerLinkActive: string[] | string
 ngAfterContentInit(): void
 ngOnChanges(changes: SimpleChanges): void
 ngOnDestroy(): void
}

例

.red{
  color: red;
}

<a routerLink="/user/login" routerLinkActive="red">login</a>

URLがuserまたは/user/loginの場合、classredでaタグが追加されます。 URL が他のものに変更されると、クラスは削除されます。

2つのクラスを追加するにはどうすればよいですか?

<a routerLink="/user/login" routerLinkActive="class1 class2">login</a>

routerLinkActive には 2 つの書き方があります

<a routerLink="/user/login" routerLinkActive="class1 class2">login</a>
login

また、パラメータを設定することもできます

routerLinkActive

Pass strict: true は、ルートが完全に一致する場合に強調表示します (例:

コードをコピー) コードは次のとおりです:

login

isActive を使用してルートが現在アクティブかどうかを確認することもできます

<a routerLink="/user/login" routerLinkActive #rla="routerLinkActive">
 login {{ rla.isActive ? &#39;激活&#39; : &#39;未激活&#39;}}
</a>

現在のルートが有効化されている場合は、 ログイン有効化

無効状態

ログイン未有効化

上記のrlaはrouterLinkActiveの略称で、任意に定義できます。

ここで重要な点があります: routerLink 要素を使用する親要素で RouterLinkActive ディレクティブを使用できます

各ルートに個別にスタイルを追加するのは面倒ですか?ルートを強調表示するコマンドを親要素に追加すると、問題を解決できます。

<p routerLinkActive="red" [routerLinkActiveOptions]="{exact: true}">
 <a routerLink="/user/login">login</a>
 <a routerLink="/user/reset">reset</a>
</p>

a タグの親要素 p に routerLinkActive と routerLinkActiveOptions を追加するだけで、ルートが /user/login または /user/reset の場合、それが配置されている dom 要素に赤色のスタイルが追加されます。 ここで注意する必要があるのは、完全一致を指定するために routerLinkActiveOptions を追加することです。そうでない場合、URL が user の場合、両方のルートが一致し、赤色のスタイルが追加されます。

その他の API の使用法は github で更新されています

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

Angular5のルーティング値転送メソッドのまとめ

JSによる折りたたみと展開アニメーションの作成(コード付き)

以上が角度ルートの強調表示の実装手順の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。