在Angular2 rc1中隐藏基于路由的元素

Posted 2023-02-22

【中文标题】在Angular2 rc1中隐藏基于路由的元素

【英文标题】：Hide elements based on routing in Angular2 rc1

【发布时间】：2016-09-16 20:31:59

【问题描述】：

除了登录页面之外，我在每个页面上都有一些我想要的元素。当用户在登录页面时，我想使用 ngIf 或元素的 hidden 属性来隐藏这些元素。

我试过这个：

<div [hidden]="router.isRouteActive(router.generate('/login'))">

基于这个问答：In Angular 2 how do you determine the active route?

也试过这个：

 <div *ngIf="!router.isRouteActive(router.generate('/login'))">

但没有任何成功。

这里供参考的是与此html匹配的组件。

import  Component, OnInit  from 'node_modules/@angular/core';
import  HTTP_PROVIDERS, XHRBackend  from 'node_modules/@angular/http';
import  Routes, Router, ROUTER_DIRECTIVES  from 'node_modules/@angular/router';

import  LoginService  from './login/login.service';
import  LoginComponent  from './login/login.component';
import  UserComponent  from './user/user.component';

@Component(
    selector: 'portal',
    templateUrl: 'portal/portal.component.html',
    directives: [ROUTER_DIRECTIVES, LoginComponent, UserComponent ],
    providers: [
        HTTP_PROVIDERS,
        LoginService
    ]
)

@Routes([
     path: '/login', component: LoginComponent,
     path: '/user/:username', component: UserComponent
])

export class PortalComponent implements OnInit
    private router: Router
    constructor() 

    ngOnInit() 
        this.router.navigate(['/login']); 
     

isRouteActive 的文档非常精简，generate 也是如此。有什么更好的方法来实现这种行为吗？

【参考方案1】：

我会尝试router.generate(['/login']) 而不是router.generate('/login')。

这种语法有时很棘手。

我希望这对你的情况有所帮助

【讨论】：

你的语法是正确的，但这仍然没有解决我的问题。我能够在对不同问题的评论中找到正确的语法。

【参考方案2】：

我能够在此处的评论中找到我需要的 rc1 语法：In Angular 2 how do you determine the active route?

<div *ngIf="!router.urlTree.contains(router.createUrlTree(['/login']))">

【讨论】：

是的！终于，我找到了我一直在寻找的答案。谢谢。

contains 不是原生 javascript。对于试图在 url 中搜索字符串的人，请参阅我的回答：***.com/a/41684866/4194436

【参考方案3】：

我必须在我的代码中做类似的事情。我通过创建要从显示中排除我的元素的路线列表以编程方式完成此操作。

在我的课堂上，我从@angular/common 注入了Location 对象。

public isHidden() 
  let list = ["/login"],
      route = this.location.path();

  return (list.indexOf(route) > -1);

然后在我的模板中，我使用hidden 属性并将其绑定到我的函数。

<div id="elementToHide" [hidden]="isHidden()"></div>

【参考方案4】：

这就是我为 Angular2 RC5 路由器所做的：

import Router from '@angular/router';

public location = '' ;

constructor(private  _router : Router) 
      
  this.location = _router.url;

在 HTML 中：

<div *ngIf = "location == '/home' ">
</div>

希望这会有所帮助！

【讨论】：

甚至可以在 HTML 中使用 _router.url。这种方式将在路由器更改时刷新路由器

【参考方案5】：

只需检查模板中的router.url：

my.component.ts

...
constructor(public router: Router)
...

my.component.html

<div *ngIf="router.url != '/login'">
    <h2>Not in login!</h2>
</div>

【讨论】：

完美答案:)

如果您有辅助路线，此解决方案可能会中断。

【参考方案6】：

所有解决方案都没有按预期进行。如果您有带参数的路线。可以使用 ES6 includes:

<div *ngIf="!_router.url.includes('login')">Show me except on login page</div>

【讨论】：

但这在刷新时不起作用，因为在我的情况下模块不会再次加载。

【参考方案7】：

我们可以在一些简单的情况下使用 hack。它基于RouterLinkActive 指令，不仅可以添加到锚点，还可以添加到它的父节点。所以我们可以做到以下几点：

<div routerLinkActive="hidden">
    <a routerLink="/login">Login</a>
</div>

hidden 是一个标准的引导类：

.hidden 
    display: none!important;

工作原理：当您在登录区域内时，会添加 hidden 类，而您看不到 div。一旦您导航到另一条路线，hidden 类就会消失并且 div 是可见的。

缺点是您需要在div 内有一个带有routerLink 的链接。

【参考方案8】：

至少对于 Angular 2 的更新版本并取决于特定的用例。您可以将内容嵌入并仅将其添加到您想要的路由组件中。比维护路由列表和使用 ngIf 条件要好得多。

在您的组件模板中。 添加一个 ngcontent 元素并使用 select 为其命名

<ng-content select="[content-name]"></ng-content>  

然后您可以使用该组件并嵌入内容。

<component>
<div content-name> transcluded content</div>
</component>

或者在不引用转入内容的情况下使用它

<component>
</component>

【参考方案9】：

您可以通过检查特定组件的 url 来隐藏/显示元素，

像这样修改你的 component.ts 文件，

import  RouterModule, Router, NavigationEnd  from '@angular/router';

hideElement = false;

constructor(private router: Router) 
  this.router.events.subscribe((event) => 
    if (event instanceof NavigationEnd) 
      if (event.url === '/login') 
        this.hideElement = true;
        else 
        this.hideElement = false;
      
    
  );

在 component.html

中使用此 hideElement 属性

<div [hidden]="hideElement">

【参考方案10】：

RxJS 示例（可观察）：

@Component(
  ...
)
export class AppComponent
    hideElement$: Observable<boolean> = this.router.events
        .pipe(
            filter((event) => event instanceof NavigationEnd),
            map((data: any) => data.url === '/login')
        );

<ng-container *ngIf="!(hideElement$ | async)">
  <p>Hide me on Login page!</p>
</ng-container>

【参考方案11】：

基于@Michelangelo 的评论：

在您的组件中：

import  Routes, Router  from 'node_modules/@angular/router';

export class YourComponent implements OnInit
     constructor(public router: Router ) 
    

在 HTML 中：

<ng-container *ngIf="!router.url.includes('admin')">
    <p>The content you want to hide when in the above url path</p>
</ng-container>