Angular2 rc1의 라우팅을 기준으로 요소 숨기기

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에 대한 설명서는 생성할 때도 마찬가지로 매우 얇습니다.이 행동을 달성하기 위한 더 나은 방법에 대한 지침이 있습니까?

▁check를 확인하면 됩니다.router.url템플릿에서:

my.component.ts

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

my.component.html

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

Angular2 RC5 라우터에 대해 수행한 작업은 다음과 같습니다.

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

public location = '' ;

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

HTML에서:

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

이것이 도움이 되길 바랍니다!

여기 댓글에 묻혀있는 rc1에 필요한 구문을 찾을 수 있었습니다.Angular 2에서 활성 경로를 어떻게 결정합니까?

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

특정 구성요소의 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;
      }
    }
  });
}

하기 »hideElement구성 요소.vmdk의 속성

<div [hidden]="hideElement">

저는 제 코드에서 비슷한 일을 해야 했습니다.이 작업은 요소가 표시되지 않도록 제외할 경로 목록을 만들어 프로그래밍 방식으로 수행했습니다.

우리 반에서, 나는 주사를 놓았습니다.Location의 입니다.@angular/common.

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

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

그런 다음 내 템플릿에서 다음을 사용합니다.hidden내 함수에 속성을 지정하고 바인딩합니다.

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

모든 해결책이 예상대로 되지 않았습니다.매개 변수가 있는 경로가 있는 경우.ES6를 사용할 수 있습니다.includes:

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

간단한 경우에 사용할 수 있는 해킹이 있습니다.이는 다음을 두고 있습니다.RouterLinkActive앵커뿐만 아니라 부모에게도 추가할 수 있는 지시문.따라서 다음을 수행할 수 있습니다.

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

hidden클래스입니다.

.hidden {
    display: none!important;
}

: 영역 는 "로그인: 로그인 영역"을 합니다.hidden되었지만 클스가볼수없습다니만지가 .div 다른하면, 다른경이면하동로로,,면,hidden클래스가 사라지고 div가 표시됩니다.

단점은 당신이 링크를 가지고 있어야 한다는 것입니다.routerLink에의 에.div.

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>

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

적어도 각도 2의 최신 버전과 특정 사용 사례에 따라 다릅니다.내용을 제외하고 원하는 경로 구성요소에만 내용을 추가할 수 있습니다.경로 목록을 유지하고 ngIf 조건을 사용하는 것보다 훨씬 좋습니다.

구성 요소 템플릿에 있습니다.내용 요소를 추가하고 선택을 사용하여 이름을 지정합니다.

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

그런 다음 해당 구성 요소를 사용하여 내용을 제외할 수 있습니다.

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

또는 변환된 내용을 참조하지 않고 사용할 수 있습니다.

<component>
</component>

노력하겠습니다router.generate(['/login'])보다는router.generate('/login').

이 구문은 때때로 까다롭습니다.

이것이 당신의 경우에 도움이 되기를 바랍니다.

언급URL : https://stackoverflow.com/questions/37332061/hide-elements-based-on-routing-in-angular2-rc1