Javascript 根据管线隐藏和显示角度4组件

嗨，我不确定这是否可能。。。基本上，我希望能够显示一个组件，但只有当路由匹配时，我才想隐藏一个组件，如果路由匹配，我尝试了这个

app header home

显示路由为

'/'

，这很好，但是

app header

根本不显示，即使路由为

'/'

我如何解决这个问题

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>

---

谢谢

检查模板中的

路由器.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>

看看这个

您需要一个名为

canActivate

的方法，该方法在服务中返回布尔值及其值

这就是我的工作方式：

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

---

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

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

constructor(private _router: Router){}

然后在我们的模板中：

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

... 您的组件html。。。

下面的代码对我很有用

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

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

---

这是指SUNIL JADHAV发表的评论。我们可以在函数中定义路由器句柄并在模板中调用它，而不是在模板上公开路由器句柄

从'@angular/core'导入{Component，OnInit}；
从'@angular/Router'导入{Router}；
@组成部分({
选择器：“我的组件”，
templateUrl:“./my.component.html”，
样式URL:['./my.component.scss']
})
导出类MyComponent实现OnInit{
建造师(
专用路由器：路由器，
) {}
恩戈尼尼特（）{
}
/**
*检查路由器url是否包含指定的路由
*
*@param{string}路由
*@返回
*@MyComponent成员
*/
hasRoute（路由：字符串）{
返回此.router.url.includes（路由）；
}
}

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

第一视图
第二视图

嘿，我试过你说的，但似乎不起作用？控制台中没有错误我用新代码更新了我的问题我收到了这个错误

[ts]属性“router”在类型“AppComponent”上不存在，您是指“\u router”？

另外，如果路由不是“/”，我如何才能对

应用头执行相反的操作？仅将url分配给构造函数中的
此路由器对我不起作用。我必须分配路由器实例：
this.router=\u router
然后从if条件调用url
*ngIf=“router.url！='/ur_route'
。另外，
router
属性也需要从type
string
更改为type
router
。此答案似乎与所问问题无关。他想隐藏基于路由的组件。未阻止对路由的访问。我遇到此生成错误：属性“router”是私有的，只能在内部访问class@Harsimer您需要将其更改为
public
，才能在模板中使用它。在html模板中使用函数是错误的做法
<div *ngIf="_router.url != '/login'">
  ... your component html ...
</div>

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