在 Angular 中，如何确定活动路由？

【问题标题】：In Angular, how do you determine the active route?在 Angular 中，如何确定活动路由？
【发布时间】：2016-03-23 06:22:36
【问题描述】：

注意： 这里有许多不同的答案，而且大多数都曾经有效。事实是，随着 Angular 团队改变了它的路由器，有效的方法已经改变了很多次。最终将成为 Angular 中 the 路由器的 Router 3.0 版本打破了许多这些解决方案，但提供了一个非常简单的解决方案。从 RC.3 开始，首选的解决方案是使用 [routerLinkActive]，如 this answer 所示。

在一个 Angular 应用程序中（我写这篇文章时当前版本为 2.0.0-beta.0），你如何确定当前活动的路由是什么？

我正在开发一个使用 Bootstrap 4 的应用程序，当导航链接/按钮的关联组件显示在 <router-output> 标记中时，我需要一种方法将其标记为活动状态。

我意识到当单击其中一个按钮时我可以自己维护状态，但这不包括有多个路径进入同一路径的情况（比如主导航菜单和本地菜单）主要成分）。

任何建议或链接将不胜感激。谢谢。

【问题讨论】：

    标签： javascript typescript angular angular2-routing


    【解决方案1】：

    您可以通过将Location 对象注入您的控制器并检查path() 来检查当前路由，如下所示：

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

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

    您必须确保先导入它：

    import {Location} from "angular2/router";

    然后，您可以使用正则表达式与返回的路径进行匹配，以查看哪个路由处于活动状态。请注意，无论您使用的是哪个 LocationStrategy，Location 类都会返回规范化路径。所以即使你使用HashLocationStragegy，返回的路径仍然是/foo/bar not #/foo/bar

    【讨论】：

      【解决方案2】：

      我已经在另一个问题中回答了这个问题，但我相信它也可能与这个问题有关。这是原始答案的链接： Angular 2: How to determine active route with parameters?

      我一直在尝试设置 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>

      到目前为止，这是我解决此问题的首选解决方案，它也可能对您有所帮助。

      【讨论】：

      • 我认为这个解决方案比公认的解决方案更好，因为它使用 Angular API 而不是匹配路径的正则表达式。不过还是有点难看，能做到router.isRouteActive('Home')就好了。
      • 我在尝试实施该解决方案时遇到了一些问题，所以也许对某些人有用：stackoverflow.com/questions/35882998/…
      • 不要忘记将Router 放入类的构造函数中
      • 在最新的 Angular 2 版本中，我在路由器配置对象中使用了name，而不是as。
      • 这可以在rc1中使用：router.urlTree.contains(router.createUrlTree(['Home']))
      【解决方案3】：

      我解决了我在link 中遇到的一个问题，我发现有一个简单的解决方案可以解决您的问题。你可以在你的样式中使用router-link-active。

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

      【讨论】：

      • 我相信这应该是公认的答案。 Angular2 的路由器会自动为你添加这个。
      • 不幸的是，该课程添加在 上，而不是
    • 不幸的是，它并不能很好地工作。我有一个动态生成的菜单，router-link-active 类没有被添加到活动的a 或li。但有一个地方我正在使用引导程序nav-tabs，它在那里工作。
      • 【解决方案4】：

      基于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>

      【讨论】：

      • 和组件中的样式styles : [.active { background-color: aliceblue; }]。 +1 有效
      • 很好的解决方案，您可以将路由器设为私有。
      • 这是一个更好的解决方案，对于忘记创建构造函数和传入路由器之类的小事情的菜鸟特别有用！你完全应该得到检查。
      • Angular 8 中不存在这些方法
      【解决方案5】：

      我正在寻找一种在 Angular2 中使用 Twitter Bootstrap 样式导航的方法，但无法将 active 类应用于所选链接的父元素。发现@alex-correia-santos 的解决方案效果很好！

      包含选项卡的组件必须导入路由器并在其构造函数中定义它，然后才能进行必要的调用。

      这是我的实现的简化版本...

      import {Component} from 'angular2/core';
import {Router, RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import {HomeComponent} from './home.component';
import {LoginComponent} from './login.component';
import {FeedComponent} from './feed.component';

@Component({
  selector: 'my-app',
  template: `
    <ul class="nav nav-tabs">
      <li [class.active]="_r.isRouteActive(_r.generate(['Home']))">
        <a [routerLink]="['Home']">Home</a>
      </li>
      <li [class.active]="_r.isRouteActive(_r.generate(['Login']))">
        <a [routerLink]="['Login']">Sign In</a>
      </li>
      <li [class.active]="_r.isRouteActive(_r.generate(['Feed']))">
        <a [routerLink]="['Feed']">Feed</a>
      </li>
    </ul>`,
  styleUrls: ['app/app.component.css'],
  directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
  { path:'/', component:HomeComponent, name:'Home', useAsDefault:true },
  { path:'/login', component:LoginComponent, name:'Login' },
  { path:'/feed', component:FeedComponent, name:'Feed' }
])
export class AppComponent {
  title = 'My App';
  constructor( private _r:Router ){}
}

      【讨论】：

        【解决方案6】：

        以下是使用 RouteData 根据当前路由设置菜单栏项目样式的方法：

        RouteConfig 包含带有标签的数据（当前路由）：

        @RouteConfig([
  {
    path: '/home',    name: 'Home',    component: HomeComponent,
    data: {activeTab: 'home'},  useAsDefault: true
  }, {
    path: '/jobs',    name: 'Jobs',    data: {activeTab: 'jobs'},
    component: JobsComponent
  }
])

        一块布局：

          <li role="presentation" [ngClass]="{active: isActive('home')}">
    <a [routerLink]="['Home']">Home</a>
  </li>
  <li role="presentation" [ngClass]="{active: isActive('jobs')}">
    <a [routerLink]="['Jobs']">Jobs</a>
  </li>

        类：

        export class MainMenuComponent {
  router: Router;

  constructor(data: Router) {
    this.router = data;
  }

  isActive(tab): boolean {
    if (this.router.currentInstruction && this.router.currentInstruction.component.routeData) {
      return tab == this.router.currentInstruction.component.routeData.data['activeTab'];
    }
    return false;
  }
}

        【讨论】：

          【解决方案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
}

          see more...

          【讨论】：

            【解决方案8】：

            在简单的情况下使用routerLinkActive 很好，当有一个链接并且你想应用一些类时。但在更复杂的情况下，您可能没有 routerLink 或您需要更多东西，您可以创建和使用 管道：

            @Pipe({
    name: "isRouteActive",
    pure: false
})
export class IsRouteActivePipe implements PipeTransform {

    constructor(private router: Router,
                private activatedRoute: ActivatedRoute) {
    }

    transform(route: any[], options?: { queryParams?: any[], fragment?: any, exact?: boolean }) {
        if (!options) options = {};
        if (options.exact === undefined) options.exact = true;

        const currentUrlTree = this.router.parseUrl(this.router.url);
        const urlTree = this.router.createUrlTree(route, {
            relativeTo: this.activatedRoute,
            queryParams: options.queryParams,
            fragment: options.fragment
        });
        return containsTree(currentUrlTree, urlTree, options.exact);
    }
}

            然后：

            <div *ngIf="['/some-route'] | isRouteActive">...</div>

            并且不要忘记在管道依赖项中包含管道；）

            【讨论】：

            • 好主意，但在 angular2.0.0rc3 中，我将 this.router.isRouteActive... 更改为 this._location.path() 并放在上面： import { Location } from '@angular/common ';
            • 代码中似乎缺少某些内容。 containsTree 定义在哪里？
            【解决方案9】：

            Angular 2 RC 中的Router 不再定义isRouteActive 和generate 方法。

            urlTree - 返回当前的 url 树。

            createUrlTree(commands: any[], segment?: RouteSegment) - 将一组命令应用于当前 url 树并创建一个新的 url 树。

            尝试关注

            <li 
[class.active]=
"router.urlTree.contains(router.createUrlTree(['/SignIn', this.routeSegment]))">

            注意，routeSegment : RouteSegment 必须注入到组件的构造函数中。

            【讨论】：

              【解决方案10】：

              Router 类的实例实际上是一个 Observable，它在每次更改时返回当前路径。我就是这样做的：

              export class AppComponent implements OnInit { 

currentUrl : string;

constructor(private _router : Router){
    this.currentUrl = ''
}

ngOnInit() {
    this._router.subscribe(
        currentUrl => this.currentUrl = currentUrl,
        error => console.log(error)
    );
}

isCurrentRoute(route : string) : boolean {
    return this.currentUrl === route;
 } 
}

              然后在我的 HTML 中：

              <a [routerLink]="['Contact']" class="item" [class.active]="isCurrentRoute('contact')">Contact</a>

              【讨论】：

              • .subscribe 在路由器实例上不可用。
              【解决方案11】：

              这是在 Angular 版本 2.0.0-rc.1 中添加活动路由样式的完整示例，其中考虑了空根路径（例如 path: '/'）

              app.component.ts -> 路由

              import { Component, OnInit } from '@angular/core';
import { Routes, Router, ROUTER_DIRECTIVES } from '@angular/router';
import { LoginPage, AddCandidatePage } from './export';
import {UserService} from './SERVICES/user.service';

@Component({
  moduleId: 'app/',
  selector: 'my-app',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  providers: [UserService],
  directives: [ROUTER_DIRECTIVES]
})

@Routes([
  { path: '/', component: AddCandidatePage },
  { path: 'Login', component: LoginPage }
])
export class AppComponent  { //implements OnInit

  constructor(private router: Router){}

  routeIsActive(routePath: string) {
     let currentRoute = this.router.urlTree.firstChild(this.router.urlTree.root);
     // e.g. 'Login' or null if route is '/'
     let segment = currentRoute == null ? '/' : currentRoute.segment;
     return  segment == routePath;
  }
}

              app.component.html

              <ul>
  <li [class.active]="routeIsActive('Login')"><a [routerLink]="['Login']" >Login</a></li>
  <li [class.active]="routeIsActive('/')"><a [routerLink]="['/']" >AddCandidate</a></li>
</ul>
<route-outlet></router-outlet>

              【讨论】：

                【解决方案12】：

                使用新的Angular router，您可以为所有链接添加[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>

                请参阅poorly documented routerLinkActive directive 了解更多信息。 （我主要是通过反复试验来解决这个问题的。）

                更新：routerLinkActive 指令的更好文档现在可以在 here 找到。 （感谢下面 cmets 中的@Victor Hugo Arango A.。）

                【讨论】：

                • 当路由的子节点处于活动状态时，有什么方法可以激活它吗？该代码有一个@input 选项，但exact: false 会在当前路由的兄弟姐妹也处于活动状态时激活该类。
                • @GabrieleB-David 我没有测试过，但我认为router.navigate() 可以正常工作。 routerLinkActive 只是这个链接是否代表活动路由的指示器。
                • 在给定的示例中，[routerLinkActive] 被添加到 标记中，但是，如果其他地方需要该类，它也可以放在其他元素上。
                • @jessepinho - 试过了 - [routerLinkActive]="'active'" 只有在 a-tag 中也有 [routerLink] 时才会起作用。如果您使用 (click)="navitageTo('/route')" 而不是 [routerLink]，并且在该函数中调用了 this.router.navigate(route)，则新组件将加载但您的活动 CSS 类不会不能应用。除了 this.router.navigate(..) 之外，我正在尝试在该函数中执行其他操作。
                • 官方文档中的例子可以帮助你：angular.io/docs/ts/latest/api/router/index/…
                【解决方案13】：

                另一种解决方法。在 Angular Router V3 Alpha 中容易得多。通过注入路由器

                import {Router} from "@angular/router";

export class AppComponent{

    constructor(private router : Router){}

    routeIsActive(routePath: string) {
        return this.router.url == routePath;
    }
}

                用法

                <div *ngIf="routeIsActive('/')"> My content </div>

                【讨论】：

                • 一导入它，我就会得到一个无法读取属性“isSkipSelf”的空错误。有什么想法吗？
                【解决方案14】：

                可以使用routerLinkActive标记活动路由

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

                这也适用于其他元素，例如

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

                如果partial matches也应该标记使用

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

                据我所知exact: false 将成为 RC.4 中的默认值

                【讨论】：

                  【解决方案15】：

                  在 Angular2 RC2 中你可以使用这个简单的实现

                  <a [routerLink]="['/dashboard']" routerLinkActive="active">Dashboard</a>

                  这会将类 active 添加到具有匹配 url 的元素中，阅读更多关于它的信息 here

                  【讨论】：

                    【解决方案16】：

                    Angular2 RC 4 的解决方案：

                    import {containsTree} from '@angular/router/src/url_tree';
import {Router} from '@angular/router';

export function isRouteActive(router: Router, route: string) {
   const currentUrlTree = router.parseUrl(router.url);
   const routeUrlTree = router.createUrlTree([route]);
   return containsTree(currentUrlTree, routeUrlTree, true);
}

                    【讨论】：

                      【解决方案17】：

                      以下是迄今为止发布的所有 Angular 2 RC 版本的这个问题的答案：

                      RC4 和 RC3：

                      用于将类应用于链接或链接的祖先：

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

                      /home 应该是 URL 而不是路由名称，因为从路由器 v3 开始，路由对象上不再存在 name 属性。

                      link 上有关 routerLinkActive 指令的更多信息。

                      用于根据当前路由将类应用于任何 div：

                      • 将路由器注入组件的构造函数。
                      • 用户 router.url 进行比较。

                      例如

                      <nav [class.transparent]="router.url==('/home')">
</nav>

                      RC2 和 RC1：

                      使用 router.isRouteActive 和 class.* 的组合。例如，根据 Home Route 应用活动课程。

                      名称和网址都可以传入 router.generate。

                       <li [class.active]="router.isRouteActive(router.generate(['Home']))">
    <a [routerLink]="['Home']" >Home</a>
</li>

                      【讨论】：

                        【解决方案18】：

                        现在我正在使用带有 bootstrap 4 的 rc.4，这个非常适合我：

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

                        这适用于网址：/home

                        【讨论】：

                        • 确切选项的目的是什么？这是否使它不匹配像/home/whatever 这样的子路径？
                        • 是的，exact 的意思是，该路线将具有相同的名称。如果您计划将它与 twitter bootstrap 等工具一起使用，则这是必需的。它已经处理了活动链接状态，没有exact 选项将无法工作。 （不确定它在核心中是如何工作的，我试过了，它对我有用）
                        【解决方案19】：

                        正如已接受答案的 cmets 之一所述，routerLinkActive 指令也可以应用于实际 &lt;a&gt; 标记的容器。

                        例如 使用 Twitter Bootstrap 选项卡，应该将活动类应用于包含链接的 &lt;li&gt; 标记：

                        <ul class="nav nav-tabs">
    <li role="presentation" routerLinkActive="active">
        <a routerLink="./location">Location</a>
    </li>
    <li role="presentation" routerLinkActive="active">
        <a routerLink="./execution">Execution</a>
    </li>
</ul>

                        相当整洁！我想该指令会检查标签的内容并使用routerLink 指令查找&lt;a&gt; 标签。

                        【讨论】：

                          【解决方案20】：

                          我正在使用角度路由器^3.4.7，但routerLinkActive 指令仍然存在问题。

                          如果您有多个具有相同 url 的链接，并且它似乎不会一直刷新，则它不起作用。

                          受@tomaszbak 回答的启发，我创建了一个little component 来完成这项工作

                          【讨论】：

                            【解决方案21】：

                            假设您想将 CSS 添加到我的活动状态/标签中。使用 routerLinkActive 激活您的路由链接。

                            注意：'active' 是我的班级名称

                            <style>
   .active{
       color:blue;
     }
</style>

  <a routerLink="/home" [routerLinkActive]="['active']">Home</a>
  <a routerLink="/about" [routerLinkActive]="['active']">About</a>
  <a routerLink="/contact" [routerLinkActive]="['active']">Contact</a>

                            【讨论】：

                              【解决方案22】：

                              对于 Angular 4+，您不需要使用任何复杂的解决方案。你可以简单地使用[routerLinkActive]="'is-active'"。

                              以 bootstrap 4 导航链接为例：

                                  <ul class="navbar-nav mr-auto">
      <li class="nav-item" routerLinkActive="active">
        <a class="nav-link" routerLink="/home">Home</a>
      </li>
      <li class="nav-item" routerLinkActive="active">
        <a class="nav-link" routerLink="/about-us">About Us</a>
      </li>
      <li class="nav-item" routerLinkActive="active">
        <a class="nav-link " routerLink="/contact-us">Contact</a>
      </li>
    </ul>

                              【讨论】：

                                【解决方案23】：

                                只是想我会添加一个不使用任何打字稿的示例：

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

                                routerLinkActive 变量绑定到模板变量，然后根据需要重新使用。不幸的是，唯一需要注意的是，您不能在 &lt;section&gt; 元素上拥有这一切，因为 #home 需要在解析器命中 &lt;section&gt; 之前解决。

                                【讨论】：

                                • 在活动路由上应用条件的完美解决方案。@angular/router 否则不起作用。
                                • 哇，这太有帮助了。谢谢！
                                【解决方案24】：

                                对于 Angular 5 用户的简单解决方案是，只需将 routerLinkActive 添加到列表项即可。

                                routerLinkActive 指令与通过 routerLink 指令的路由相关联。

                                它将一个类数组作为输入，如果它的路由当前处于活动状态，它将添加到它所附加的元素中，如下所示：

                                <li class="nav-item"
    [routerLinkActive]="['active']">
  <a class="nav-link"
     [routerLink]="['home']">Home
  </a>
</li>

                                如果我们当前正在查看home route，上面会为anchor标签添加一个active类。

                                【讨论】：

                                  【解决方案25】：

                                  纯html模板就好了

                                   <a [routerLink]="['/home']" routerLinkActive="active">Home</a>
 <a [routerLink]="['/about']" routerLinkActive="active">About us</a>
 <a [routerLink]="['/contact']" routerLinkActive="active">Contacts</a>

                                  【讨论】：

                                    【解决方案26】：

                                    从在您的 .ts 中导入 RouterLinkActive 开始

                                    从'@angular/router'导入{RouterLinkActive}；

                                    现在在你的 HTML 中使用 RouterLinkActive

                                    <span class="" routerLink ="/some_path" routerLinkActive="class_Name">Value</span></a>

                                    为类 "class_Name" 提供一些 css，因为当这个链接被激活/点击时，你会在检查时发现这个类。

                                    【讨论】：

                                      【解决方案27】：

                                      从 Angular 8 开始，这是可行的：

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

                                      { exact: true } 确保它与 url 匹配。

                                      【讨论】：

                                      • 你真的节省了我的时间。我只是在寻找这个......非常感谢！我正在使用 ng-bootstrap:6.2.X 和 Angular: 9.1.14
                                      【解决方案28】：

                                      在最新版本的 Angular 中，您可以简单地检查 router.isActive(routeNameAsString)。例如看下面的例子：

                                       <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item" [class.active] = "router.isActive('/dashboard')">
        <a class="nav-link" href="#">داشبورد <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item" [class.active] = "router.isActive(route.path)" *ngFor="let route of (routes$ | async)">
        <a class="nav-link" href="javascript:void(0)" *ngIf="route.childRoutes && route.childRoutes.length > 0"
          [matMenuTriggerFor]="menu">{{route.name}}</a>
        <a class="nav-link" href="{{route.path}}"
          *ngIf="!route.childRoutes || route.childRoutes.length === 0">{{route.name}}</a>
        <mat-menu #menu="matMenu">
          <span *ngIf="route.childRoutes && route.childRoutes.length > 0">
            <a *ngFor="let child of route.childRoutes" class="nav-link" href="{{route.path + child.path}}"
              mat-menu-item>{{child.name}}</a>
          </span>
        </mat-menu>
      </li>
    </ul>
    <span class="navbar-text mr-auto">
      <small>سلام</small> {{ (currentUser$ | async) ? (currentUser$ | async).firstName : 'کاربر' }}
      {{ (currentUser$ | async) ? (currentUser$ | async).lastName : 'میهمان' }}
    </span>
  </div>

                                      并确保您不会忘记在组件中注入路由器。

                                      【讨论】：

                                        【解决方案29】：

                                        在 2020 年，如果您想在没有 [routerLink] 的元素上设置活动类 - 您可以简单地做：

                                        <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>

                                        【讨论】：

                                          【解决方案30】：

                                          一种编程方式是在组件本身中进行。我在这个问题上苦苦挣扎了三个星期，但放弃了 angular 文档并阅读了使 routerlinkactive 工作的实际代码，这就是我能找到的最好的文档。

                                              import {
  Component,AfterContentInit,OnDestroy, ViewChild,OnInit, ViewChildren, AfterViewInit, ElementRef, Renderer2, QueryList,NgZone,ApplicationRef
}
  from '@angular/core';
  import { Location } from '@angular/common';

import { Subscription } from 'rxjs';
import {
  ActivatedRoute,ResolveStart,Event, Router,RouterEvent, NavigationEnd, UrlSegment
} from '@angular/router';
import { Observable } from "rxjs";
import * as $ from 'jquery';
import { pairwise, map } from 'rxjs/operators';
import { filter } from 'rxjs/operators';
import {PageHandleService} from '../pageHandling.service'
@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})




export class HeaderComponent implements AfterContentInit,AfterViewInit,OnInit,OnDestroy{

    public previousUrl: any;
    private subscription: Subscription;


      @ViewChild("superclass", { static: false } as any) superclass: ElementRef;
      @ViewChildren("megaclass") megaclass: QueryList<ElementRef>;


  constructor( private element: ElementRef, private renderer: Renderer2, private router: Router, private activatedRoute: ActivatedRoute, private location: Location, private pageHandleService: PageHandleService){
    this.subscription = router.events.subscribe((s: Event) => {
      if (s instanceof NavigationEnd) {
        this.update();
      }
    });


  }


  ngOnInit(){

  }


  ngAfterViewInit() {
  }

  ngAfterContentInit(){
  }



private update(): void {
  if (!this.router.navigated || !this.superclass) return;
      Promise.resolve().then(() => {
        this.previousUrl = this.router.url

        this.megaclass.toArray().forEach( (superclass) => {

          var superclass = superclass
          console.log( superclass.nativeElement.children[0].classList )
          console.log( superclass.nativeElement.children )

          if (this.previousUrl == superclass.nativeElement.getAttribute("routerLink")) {
            this.renderer.addClass(superclass.nativeElement.children[0], "box")
            console.log("add class")

          } else {
            this.renderer.removeClass(superclass.nativeElement.children[0], "box")
            console.log("remove class")
          }

        });
})
//update is done
}
ngOnDestroy(): void { this.subscription.unsubscribe(); }


//class is done
}

                                          注意：
                                          对于编程方式，请确保添加 router-link 并且它需要一个子元素。如果你想改变这一点，你需要摆脱superclass.nativeElement上的孩子。

                                          【讨论】：

                                            猜你喜欢
                                            相关资源
                                            最近更新 更多
                                            热门标签
                                            Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode