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

Question

ログインページ以外のすべてのページで必要な要素がいくつかあります。私は、ユーザーがログインページにいるときにそれらの要素を非表示にするために、要素の隠しプロパティまたはngIfを使用したいと思います。

<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と同じです。この動作を達成するためのよりよい方法の方向性？

Answer 1

に私はここにコメントで埋めRC1のために必要な構文を見つけることができたのに役立ちます願っています：In Angular 2 how do you determine the active route?

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

Answer 2

router.generate('/login')ではなく、router.generate(['/login'])を試してみます。

この構文は時々トリッキーです。

私は、これはあなたのケース

Answer 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>

Answer 4

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

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

public location = '' ; 

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

：

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

・ホープ、このことができます！

Answer 5

単にテンプレートでrouter.urlをチェックしてください。

my.component.ts

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

my.component.html

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

Answer 6

を期待通りのソリューションのすべてがうまくいきませんでした。パラメータ付きのルートがある場合。あなたはES6 includesを使用することができます。

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

Answer 7

我々はいくつかの簡単な例で使用することができますハックがあります。それはアンカーだけでなく、その親にも追加することができるRouterLinkActive指令に基づいています。だから我々は、次の操作を行うことができます

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

hiddenは、標準のブートストラップクラスです：

.hidden { 
    display: none!important; 
} 

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

divの中にrouterLinkというリンクが必要な場合があります。

Answer 8

角度2の最新バージョンと、特定のユースケースに応じて、少なくともコンテンツをクロールできます。コンテンツをクロールして、必要な場所のルートコンポーネントに追加することができます。ルートのリストを維持し、ngIf条件を使用するよりもずっと優れています。

コンポーネントテンプレート。 はngcontent要素を追加し、その後、あなたがそのコンポーネントを使用してコンテンツをtranscludeすることができ、それを

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

を名前を与えることを選択します。

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

か、構文上正しいですが、これはまだ私の問題を解決しなかったトランスクルードコンテンツ

<component> 
</component>