根据路线隐藏和显示角度 4 组件答案

【问题标题】：Hide and Show angular 4 component depending on route根据路线隐藏和显示角度 4 组件
【发布时间】：2018-05-22 06:40:55
【问题描述】：

嗨，我不确定这是否可能...基本上我希望能够显示一个组件，但前提是路由匹配并在路由匹配时隐藏一个组件我试过这个app-header-home 显示路由何时'/'which 很好，但 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
  ) {

  }
}

谢谢

【问题讨论】：

标签： javascript angular typescript

【解决方案1】：

检查模板中的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。

export class AppComponent {
  title = 'app';
  router: string;

  constructor(private _router: Router){

          this.router = _router.url; 
    }
}

【讨论】：

嘿我试过你说的，它似乎没有工作？
控制台中没有错误我用新代码更新了我的问题
我收到此错误[ts] Property 'router' does not exist on type 'AppComponent' did you mean '_router'?
我怎么能对app-header做相反的事情只显示如果路线不是'/'？
在构造函数中仅将 url 分配给 this.router 对我不起作用。我必须分配路由器实例：this.router = _router;，然后从 if 条件 *ngIf="router.url != '/ur_route'" 调用 url。 PS，router 属性也需要从string 类型更改为Router 类型。

【解决方案2】：

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

我是这样做的。我们将路由器注入到我们想要隐藏的组件中：

constructor(private _router: Router){}

然后在我们的模板中：

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

【讨论】：

我收到此构建错误：属性“路由器”是私有的，只能在类中访问
@Harsimer 您需要将其更改为public 才能在模板中使用。

【解决方案3】：

这是参考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>

【讨论】：

我喜欢它封装路由器而不是暴露给模板的方式。感谢您发布此内容。

【解决方案4】：

下面的代码对我有用。

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

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

【讨论】：

在 html 模板中使用函数的坏习惯

【解决方案5】：

看看这个Angular Rounting guide。

您将需要一个名为 canActivate 的方法，此方法返回一个布尔值并将其置于服务中。

这就是我的工作方式：

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

【讨论】：

这个答案似乎与提出的问题无关。他想根据路由隐藏组件。不阻止对路由的访问。