web-dev-qa-db-ja.com

Angular2 rc1のルーティングに基づいて要素を非表示にします

ログインページを除くすべてのページに必要な要素がいくつかあります。ユーザーがログインページにいるときに、ngIfまたは場合によっては要素のhiddenプロパティを使用して、これらの要素を非表示にします。

私はこれを試しました：

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

この質問と回答に基づいて： In Angular 2アクティブなルートをどのように決定しますか？

そしてこれも試してみました：

 <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のドキュメントは非常にスリムで、生成についても同じです。この動作を達成するためのより良い方法に関する方向性はありますか？

typescriptangularangular2-routingangular2-template
25
Bob

私はrc1に必要な構文をここでコメントに埋めることができました： In Angular 2アクティブなルートをどのように決定しますか？

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

単にrouter.urlテンプレート内：

my.component.ts

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

my.component.html

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

これは私がAngular2 RC5ルーターのためにしたことです：

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

public location = '' ;

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

HTMLで：

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

お役に立てれば ！

19
Aswin Gopalan

私は自分のコードで似たようなことをしなければなりませんでした。要素を表示から除外したいルートのリストを作成することにより、プログラムでこれを行いました。

私のクラスでは、Locationオブジェクトを_@angular/common_から注入しました。

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

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

次に、テンプレートでhidden属性を使用し、それを関数にバインドします。

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

7
hartpdx

すべてのソリューションが期待どおりに機能しませんでした。パラメータ付きのルートがある場合。 ES6 includesを使用できます：

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

特定のコンポーネントの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">
7
Mangesh Daundkar

いくつかの単純なケースで使用できるハックがあります。アンカーだけでなく、その親にも追加できるRouterLinkActiveディレクティブに基づいています。したがって、次のことができます。

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

hiddenは標準のbootstrapクラスです：

.hidden {
    display: none!important;
}

仕組み：ログインエリア内にいると、hiddenクラスが追加され、divは表示されません。別のルートに移動すると、hiddenクラスが消え、divが表示されます。

欠点は、routerLink内にdivとのリンクが必要なことです。

5
admax

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>
2
Axel186

少なくともangular 2の最新バージョンでは、特定のユースケースに依存します。コンテンツをトランスクルードして、目的のルートコンポーネントにのみ追加できます。リストを維持するよりもはるかに優れていますルートの使用とngIf条件の使用。

コンポーネントテンプレート内。 ngcontent要素を追加し、selectを使用して名前を付けます

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

次に、そのコンポーネントを使用してコンテンツをトランスクルードできます。

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

または、トランスクルードされたコンテンツを参照せずに使用します

<component>
</component>
1
marcus hall

@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>
1
David Diomede