Question

嗨那里我不确定这是否可行......基本上我希望能够显示一个组件，但只有当路线匹配并隐藏组件时，如果路线匹配我已尝试过这个app-header-home显示路线是'/'这是好的，但app-header根本没有显示，即使路线inst '/'如何解决这个问题？

app.component.html

<app-header *ngIf="router.url == '/'"><app-header>
<app-header-home *ngIf="router.url != '/'"></app-header-home> //component I want hidden unless url '/'
<router-outlet></router-outlet>
<app-footer></app-footer>

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'app';

  constructor(
    private router: Router
  ) {

  }
}

由于

Answer 1

检查模板中的fmt.Sprintf("%6.2f", 12.0)：

router.url

<app-header><app-header>
<app-header-home *ngIf="router != '/ur_route'"></app-header-home> //component I want hidden unless url /home
<router-outlet></router-outlet>
<app-footer></app-footer>

中的

注入了app.component.ts。

router

Answer 2

这是参考SUNIL JADHAV发表的评论。无需在模板上暴露路由器手柄，我们可以在函数中定义它并在模板中调用它。

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

@Component({
  selector: 'my-component',
  templateUrl: './my.component.html',
  styleUrls: ['./my.component.scss']
})
export class MyComponent implements OnInit {

  constructor(
    private router: Router,
  ) {}

  ngOnInit() {
  }


  /**
   * Check if the router url contains the specified route
   *
   * @param {string} route
   * @returns
   * @memberof MyComponent
   */
  hasRoute(route: string) {
    return this.router.url.includes(route);
  }
}

然后在html文件中，我们可以像这样使用它

<!-- First view -->
<div *ngIf="hasRoute('home')">
    First View
</div>

<!-- Second view activated when the route doesn't contain the home route -->
<div *ngIf="!hasRoute('home')">
    Second View
</div>

Answer 3

接受的答案没有用，因为我认为该变量只会被分配一次，然后当我们导航时，该变量将不会被更新（组件已经初始化）。

这是我的操作方法。.我们将路由器插入我们要隐藏的组件中：

constructor(private _router: Router){}

然后在我们的模板中：

<div *ngIf="_router.url != '/login'">
  ... your component html ...
</div>

Answer 4

看看这个Angular Rounting guide。

你需要一个名为canActivate的方法，这个mehtod返回一个布尔值，并且它在服务中。

这是我的作品：

{path : 'getIn', component: GetinComponent , canActivate: [GetInService] }

Answer 5

下面的代码对我有用。

我在登录屏幕中隐藏了侧面导航。

 <div *ngIf="!router.url.includes('login')"  class="sidenav">

隐藏和显示角度4组件，具体取决于路线

5 个答案: