Javascript 根据路线隐藏和显示角度 4 组件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47707225/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Hide and Show angular 4 component depending on route
提问by Smokey Dawson
Hi there Im not sure if this is possible... basically I want to be able to show a component but only if the route matches and hide a component if the route matches Ive tried this app-header-homeshows when the route is '/'which is good but app-headerdoesnt show at all even when the route inst '/'how can I fix this?
嗨，我不确定这是否可能......基本上我希望能够显示一个组件，但只有当路由匹配时才隐藏组件，如果路由匹配我试过这app-header-home显示当路由'/'是好的但app-header没有显示甚至当路线 inst'/'我该如何解决这个问题？
app.component.html
应用程序组件.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
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
) {
}
}
Thanks
谢谢
回答by Sachila Ranawaka
check the router.urlin the template:
检查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>
in app.component.tsinject the router.
在app.component.ts注入router.
export class AppComponent {
title = 'app';
router: string;
constructor(private _router: Router){
this.router = _router.url;
}
}
回答by Chtiwi Malek
The accepted answer didn't work, because i think the variable will be assigned only once, then when we navigate, that variable will not be updated (component already initialized).
接受的答案不起作用，因为我认为变量只会被分配一次，然后当我们导航时，该变量不会更新（组件已经初始化）。
here's how I did it.. We inject the router in the component we want to hide :
我是这样做的..我们将路由器注入到我们想要隐藏的组件中：
constructor(private _router: Router){}
then in our template :
然后在我们的模板中：
<div *ngIf="_router.url != '/login'">
... your component html ...
</div>
回答by Sandeep K Nair
This is in reference to the comment posted by SUNIL JADHAV. Instead of exposing the router handle on the templates we can define it inside a function and call it in the template.
这是参考 发表的评论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);
}
}
Then in the html file we can use it like so
然后在 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>
回答by SUNIL JADHAV
Below code worked for me.
下面的代码对我有用。
I am hiding side navigation in login screen.
我在登录屏幕中隐藏了侧面导航。
<div *ngIf="!router.url.includes('login')" class="sidenav">
回答by Boris Detry
Take a look at this Angular Rounting guide.
看看这个Angular Routing 指南。
You'll need a method called canActivate, this mehtod return a boolean and its in a service.
您将需要一个名为 的方法canActivate，此方法返回一个布尔值及其在服务中。
This I what works form me:
这就是我的作品：
{path : 'getIn', component: GetinComponent , canActivate: [GetInService] }
