Скрыть элементы на основе маршрутизации в Angular2 rc1

У меня есть некоторые элементы, которые я хочу на каждой странице, кроме страницы входа. Я хотел бы использовать ngIf или, возможно, скрытое свойство элементов, чтобы скрыть эти элементы, когда пользователь находится на странице входа.

Я пробовал это:

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

на основе этого вопроса и ответа: В 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 довольно тонкая, то же самое для генерации. Любое направление на лучший способ добиться такого поведения?

Ответ 1

Мне удалось найти синтаксис, который мне нужен для rc1, похороненный в комментарии здесь: В Angular 2 как вы определяете активный маршрут?

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

Ответ 2

Просто проверьте router.url в шаблоне:

my.component.ts

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

my.component.html

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

Ответ 3

Это то, что я сделал для маршрутизатора RC5 Angular2:

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

public location = '' ;

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

В HTML:

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

Надеюсь, это поможет!

Ответ 4

Мне пришлось сделать что-то подобное в моем коде. Я сделал это программно, создав список маршрутов, которые я хотел исключить из моего элемента.

В моем классе я ввел объект Location из @angular/common.

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

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

Затем в моем шаблоне я использую атрибут hidden и привязываю его к моей функции.

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

Ответ 5

Все решения не сработали, как ожидалось. Если у вас есть маршрут с параметрами. Вы можете использовать ES6 includes:

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

Ответ 6

В некоторых простых случаях можно использовать хак. Он основан на директиве RouterLinkActive, которая может быть добавлена не только к якорям, но и к родителям. Поэтому мы можем сделать следующее:

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

hidden - стандартный класс начальной загрузки:

.hidden {
    display: none!important;
}

Как это работает: когда вы находитесь внутри области входа, добавлен класс hidden, и вы не видите div. Как только вы перейдете к другому маршруту, класс hidden исчезнет, а div будет виден.

Недостатком является то, что вам нужно иметь ссылку с routerLink внутри div.

Ответ 7

По крайней мере, с более поздними версиями angular 2 и в зависимости от конкретного варианта использования. Вы можете перекрыть содержимое и добавить его только в компонент маршрута, где хотите. Гораздо лучше, чем поддерживать список маршрутов и использовать условия ngIf.

В шаблоне компонента. Добавьте элемент ngcontent и используйте select, чтобы присвоить ему имя

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

Затем вы можете использовать этот компонент и трансляцию содержимого.

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

Или использовать его без ссылки на переведенный контент

<component>
</component>

Ответ 8

Я бы попробовал router.generate(['/login']), а не router.generate('/login').

Этот синтаксис иногда бывает сложным.

Я надеюсь, что это поможет в вашем случае