如何在*ngIf中捕捉路线

Question

所以我想让标题上的锚元素在点击特定页面时消失。当该页面被点击时，如何捕获

*ngIf

中的 url。

我有一个所有页面都保持相同的标题。当我路由到

/home

时，只需要隐藏锚元素。如何在

"/home"

中捕捉到这个

*ngIf

？

*ngIf = "href='/home'"

不起作用。有什么替代方案吗？

Answer 1

mycomponent.component.ts

import { Router } from '@angular/router'

class MyComponent {
    constructor(public router: Router) { }
}

mycomponent.component.html

<div *ngIf="router.url === '/some/route'">
    <!-- … -->
</div>

Answer 2

我来到此页面是因为我遇到了与 Ravy 相同的问题，但建议的解决方案对我来说并不合适。

如果您使用带有查询参数的路由路径，则接受的答案不起作用。

这是我使用的解决方案：

mycomponent.component.ts

import { Router } from '@angular/router'

class MyComponent {
    constructor(public router: Router) { }
}

mycomponent.component.html

<div *ngIf="router.isActive('/some/route')">
    <!-- … -->
</div>

Answer 3

如果您使用的是 Angular 版本 17，请按以下步骤操作：

• 将 CommonModule 添加到 Imports 数组（这是用于 *ngIf）
• 将公共路由器添加到构造函数中

// mycomponent.component.ts:

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-footer',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './footer.component.html',
  styleUrl: './footer.component.scss'
})
export class FooterComponent {
  constructor(public router: Router) {

  }
}

// mycomponent.component.html:

• 您现在可以在模板中使用“路由器”来查询您当前的路线

Answer 4

// mycomponent.component.ts

class MyComponent {
    constructor(public router: Router){

    }
}

// mycomponent.component.html

<div *ngIf="this.router.url === '/some/route'">

</div>