javascript - 在 Angular 中，如何判斷當前的路由？

注意： 這裡有很多不同的答案，而且大多數在某個時間點都是有效的。事實上，隨著 Angular 團隊不斷更改其 Router，有效的方法也多次改變。最終將成為 Angular 中主要 router 的 Router 3.0 版本會破壞許多這些解決方案，但它自己提供了一個非常簡單的解決方案。截至 RC.3，推薦的解決方案是使用此答案中所示的 [routerLinkActive]。

在 Angular 應用程式中（截至我撰寫本文時為 2.0.0-beta.0 版本），如何判斷當前活躍的路由是什麼？

我正在開發一個使用 Bootstrap 4 的應用程式，我需要一種方法在其相關的組件顯示在 <router-output> 標籤中時，將導航連結/按鈕標記為活躍狀態。

我意識到當其中一個按鈕被點擊時，我自己可以維護狀態，但那無法涵蓋多條路徑進入同一路由的情況（例如主導航菜單以及主組件中的本地菜單）。

任何建議或連結都將不勝感激。謝謝。

答案＃1

使用新的 Angular 路由器，您可以在所有連結中添加一個 [routerLinkActive]="['your-class-name']" 屬性：

<a [routerLink]="['/home']" [routerLinkActive]="['is-active']">Home</a>

或者如果只需要一個類的話，可使用簡化的非陣列格式：

<a [routerLink]="['/home']" [routerLinkActive]="'is-active'">Home</a>

或者如果只需要一個類別的話，更簡單的格式：

<a [routerLink]="['/home']" routerLinkActive="is-active">Home</a>

請參閱文件不完整的 routerLinkActive 指令以獲取更多資訊。（我大多是透過反覆嘗試才弄明白的。）

更新：有關 routerLinkActive 指令的更好文件現在可以在這裡找到。（感謝下面評論中的 @Victor Hugo Arango A.）

答案＃2

我在另一個問題中已經回覆過這個，但我相信它也可能與這個問題相關。這是原始答案的連結：Angular：如何判斷帶參數的活動路由？

我一直在嘗試設置 active 類，而不必確切知道當前的位置 （使用路由名稱）。到目前為止，我得到的最佳解決方案是使用 Router 類中可用的 isRouteActive 函數。

router.isRouteActive(instruction): Boolean 接受一個參數，該參數是一個路由 Instruction 物件，並返回 true 或 false，表示該指令是否對當前路由成立。你可以使用 Router 的 generate(linkParams: Array) 方法來生成路由 Instruction。LinkParams 的格式與傳入 routerLink 指令的值完全相同（例如 router.isRouteActive(router.generate(['/User', { user: user.id }]))）。

這就是 RouteConfig 可能的樣子 (我稍微調整了一下以展示參數的使用方法)：

@RouteConfig([
  { path: '/', component: HomePage, name: 'Home' },
  { path: '/signin', component: SignInPage, name: 'SignIn' },
  { path: '/profile/:username/feed', component: FeedPage, name: 'ProfileFeed' },
])

而檢視看起來會是這樣：

<li [class.active]="router.isRouteActive(router.generate(['/Home']))">
   <a [routerLink]="['/Home']">Home</a>
</li>
<li [class.active]="router.isRouteActive(router.generate(['/SignIn']))">
   <a [routerLink]="['/SignIn']">Sign In</a>
</li>
<li [class.active]="router.isRouteActive(router.generate(['/ProfileFeed', { username: user.username }]))">
    <a [routerLink]="['/ProfileFeed', { username: user.username }]">Feed</a>
</li>

到目前為止，這一直是我對這個問題的首選解決方案，它也可能對你有幫助。

答案＃3

基於 https://github.com/angular/angular/pull/6407#issuecomment-190179875 對 @alex-correia-santos 的回答做了一些小改進

import {Router, RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
// ...
export class App {
  constructor(private router: Router) {
  }

  // ...

  isActive(instruction: any[]): boolean {
    return this.router.isRouteActive(this.router.generate(instruction));
  }
}

並像這樣使用它：

<ul class="nav navbar-nav">
    <li [class.active]="isActive(['Home'])">
        <a [routerLink]="['Home']">Home</a>
    </li>
    <li [class.active]="isActive(['About'])">
        <a [routerLink]="['About']">About</a>
    </li>
</ul>

答案＃4

我解決了我在這個連結中遇到的一個問題，並且發現對你的問題有一個簡單的解決方法。你可以在你的樣式中使用 router-link-active 取而代之。

@Component({
   styles: [`.router-link-active { background-color: red; }`]
})
export class NavComponent {
}

答案＃5

你可以通過將 Location 對象注入到你的控制器中，並檢查 path() 來查看當前路由，如下所示：

class MyController {
    constructor(private location:Location) {}

    ...  location.path(); ...
}

你必須先確保先導入它：

import {Location} from "angular2/router";

然後，您可以使用正則表達式匹配返回的路徑，以查看哪個路由是啟用的。請注意，Location 類會返回標準化路徑，無論您使用的是哪種 LocationStrategy。所以即使您使用的是 HashLocationStrategy，返回的路徑仍然會是 /foo/bar 的形式，而不是 #/foo/bar

答案＃6

要標記活動的路由，可以使用 routerLinkActive

<a [routerLink]="/user" routerLinkActive="some class list">User</a>

這也適用於其他元素，例如

<div routerLinkActive="some class list">
  <a [routerLink]="/user">User</a>
</div>

如果部分匹配也應標記，請使用

routerLinkActive="some class list" [routerLinkActiveOptions]="{ exact: false }"

據我所知，exact: false 將會是 RC.4 的預設值

答案＃7

你如何判斷目前正在使用的路由是什麼？

更新：已依照 Angular2.4.x 更新

constructor(route: ActivatedRoute) {
   route.snapshot.params; // active route's params

   route.snapshot.data; // active route's resolved data

   route.snapshot.component; // active route's component

   route.snapshot.queryParams // The query parameters shared by all the routes
}

查看更多...

答案＃8

截至 Angular 8，這個方法可行：

<li routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">
    <a [routerLink]="['/']">Home</a>
</li>

{ exact: true } 確保它與網址匹配。

答案＃9

只是想補充一個沒有使用任何 TypeScript 的範例：

<input type="hidden" [routerLink]="'home'" routerLinkActive #home="routerLinkActive" />
<section *ngIf="home.isActive"></section>

routerLinkActive 變數綁定到一個模板變數，然後根據需要重複使用。不幸的是，唯一的注意事項是你不能將這一切都放在 <section> 元素上，因為 #home 需要在解析器碰到 <section> 之前先行解析。

答案＃10

在 2020 年，如果你想在沒有 [routerLink] 的元素上設置 active 類 - 你可以簡單地這樣做：

<a
  (click)="bookmarks()"
  [class.active]="router.isActive('/string/path/'+you+'/need', false)" // <== you need this one. second argument 'false' - exact: true/false
  routerLinkActive="active"
  [routerLinkActiveOptions]="{ exact: true }"
>
  bookmarks
</a>

答案＃11

這對我處理啟用/停用的路由很有幫助：

<a routerLink="/user/bob" routerLinkActive #rla="routerLinkActive" [ngClass]="rla.isActive ? 'classIfActive' : 'classIfNotActive'">
</a>

參考

答案＃12

現在我正在使用 rc.4 搭配 bootstrap 4，而這個對我來說運作得非常完美：

 <li class="nav-item" routerLinkActive="active" [routerLinkActiveOptions]="{exact:
true}">
    <a class="nav-link" [routerLink]="['']">Home</a>
</li>

這將適用於網址：/home