Question

如果单击一个菜单按钮，它当前是活动路径，我希望能够在该活动路径组件中调用一个函数。

这样的事情（伪代码）

if (e.target.name == activeRoute) {
    activeRoute.callFunctionOnComponent()
}

这是我当前的导航代码

<nav>
  <a routerLink="/home" routerLinkActive="active">home</a>
  <a routerLink="/about" routerLinkActive="active">about</a>
  <a routerLink="/work" routerLinkActive="active">work</a>
</nav>
<main >
  <router-outlet></router-outlet>
</main>

Answer 1

如果我理解你，那么当你点击你当前所在的链接时，你想要调用函数。

所以，可以这样做：

<a routerLink="/work" routerLinkActive="active" (click)="checkRoute('/work')">work</a>

在checkRoute()函数内部检查：

checkRoute(link) {
    if (this.router.url === link) {
        callYourFunction(...)
        ...
    }
}

Answer 2

你的问题不清楚，但你需要这样做

ngOnInit() {//implement onInit in your component and write code in ngOninit
  this.router.events
      .filter((event) => event instanceof NavigationEnd)
     .map(() => this.activatedRoute)
    .subscribe((event) => {
     console.log('NavigationEnd:', event);
  });
}

Ans基于：Dynamic page titles in Angular 2 with router events

如果你正在使用bootstrap css，那么在html中如下

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

Angular，在活动路径中调用函数

2 个答案: