angular+RouterLinkActiveによるルート強調表示機能の実装方法の詳細な説明

今回は angular+RouterLinkActive で実装されたルーティング ハイライト機能について詳しく説明します。 angular+RouterLinkActive がルーティング ハイライトを実装する際の 注意事項 は何ですか? 以下は実際のケースです。

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

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

ナビゲーション

をクリックして別のページに入ります。その後、このルートが配置されている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

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

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

コードをコピー

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

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

<a routerLink="/user/login" routerLinkActive #rla="routerLinkActive">
 login {{ rla.isActive ? '激活' : '未激活'}}
</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 の場合、両方のルートが一致し、赤色のスタイルが追加されます。

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

推奨書籍:

Vue を使用して PopupWindow コンポーネントを実装する方法

jQuery を操作して電子時計効果を実現する方法

以上がangular+RouterLinkActiveによるルート強調表示機能の実装方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。