如何*路由器链接上的ngIf？

Question

我需要在某些页面上显示某些内容,在其他页面中它不应该是可见的.我该如何实现？它不起作用

*ngIf="[routerLink]="['/home']"

Answer 1

您可以从'@ angular/router'注入路由器并获取您当前的路由.

例如:

// mycomponent.component.ts
class MyComponent {
    constructor(public router: Router) {

    }
}

// mycomponent.component.html
<div *ngIf="router.url === '/some/route'">

</div>

Answer 2

我正在使用另一种方法。

模板：

<div class="col-12 col-sm-12 col-md-12 col-lg-12">
   <app-header></app-header>
   <app-banner *ngIf="isHomeRoute()"></app-banner>
</div>

.ts 文件：

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.less']
})

export class AppComponent implements OnInit {

  constructor(private router: Router) {}

  ngOnInit() {}

  isHomeRoute() {
    return this.router.url === '/';
  }
}

Answer 3

如果您的路线定义良好，您可以尝试以下操作：

isTournamentRoute() {
    return this.router.url.includes("/tournament");
}

这是利用不被接受的答案来增加更多的灵活性。