基于Angular2 rc1中的路由隐藏元素 [英] Hide elements based on routing in Angular2 rc1

问题描述

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

我已经试过了:

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

基于此问答:在 Angular2 如何确定活动路线?

也试过这个:

但没有任何成功.

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

import { Component, OnInit } from 'node_modules/@angular/core';从'node_modules/@angular/http'导入{ HTTP_PROVIDERS, XHRBackend };从'node_modules/@angular/router'导入{路由，路由器，ROUTER_DIRECTIVES}；从'./login/login.service'导入{登录服务}；从 './login/login.component' 导入 { LoginComponent };从 './user/user.component' 导入 { UserComponent };@成分({选择器:'门户'，templateUrl: 'portal/portal.component.html',指令: [ROUTER_DIRECTIVES, LoginComponent, UserComponent ],供应商: [HTTP_PROVIDERS,登录服务]})@路由([{ path: '/login', 组件: LoginComponent},{ 路径:'/user/:username'，组件:UserComponent}])导出类 PortalComponent 实现 OnInit{专用路由器:路由器构造函数(){}ngOnInit() {this.router.navigate(['/login']);}}

isRouteActive 的文档非常少，生成也是如此.有没有更好的方法来实现这种行为?

解决方案

我在这里的评论中找到了我需要的 rc1 语法:在 Angular 2 中，你如何确定活动路由?

I have some elements I want on every page except the login page. I'd like to use ngIf or possibly the hidden property of the elements to hide those elements when the user is on the login page.

I have tried this:

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

based on this question and answer: In Angular 2 how do you determine the active route?

And have also tried this:

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

but haven't had any success.

For reference here is the component that matches this 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']); 
    } 
}

The documentation for isRouteActive is pretty slim, the same for generate. Any direction on a better way to achieve this behavior?

解决方案

I was able to find the syntax I needed for rc1 buried in a comment here: In Angular 2 how do you determine the active route?

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

这篇关于基于Angular2 rc1中的路由隐藏元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！