경로를 기반으로 특정 페이지에서 각도 2 숨기기 탐색

Question

사용자가 특정 페이지를 볼 때 탐색을 자동으로 숨기려고합니다. 예를 들어 사용자가 로그인 페이지를보고 있으면 메뉴가 표시되지 않아야합니다.

지금까지 시도한 것은 현재 페이지의 URL 경로를 기반으로 "탐색 탐색"플래그를 변경하는 네비게이터 서비스입니다. 이것은 App Guard가 액세스합니다. 지금까지의 작업은 다음 URL을 Navigator 서비스에 전달하고 "탐색 표시"플래그를 업데이트하는 것입니다.

지금까지 테스트에서는 click 이벤트를 통해 뷰를 업데이트하여 서비스가 올바른 데이터를 수신하고 그에 따라 업데이트하는지 확인했습니다.

유일한 문제는 "항상 내비게이션 표시"플래그의 변경 사항을 구독/청취하는 방법을 생각할 수 없다는 것입니다. 내 말은 내비게이션을 숨기고 자동으로 표시하고 싶습니다.

네비게이터 서비스

import { Injectable } from '@angular/core'; 

import { Observable } from 'rxjs/Observable'; 

@Injectable() 
export class NavigatorService { 
    private showNavigation: boolean = false; 

    displayNavigation(): Observable<boolean> { 
     return Observable.of(this.showNavigation); 
    } 

    toggleNavigation(urlPath: string) { 
     if (urlPath === 'login') { 
      this.showNavigation = false; 
     } else { 
      this.showNavigation = true; 
     } 
    } 
} 

앱 가드

import { Injectable } from '@angular/core'; 
import { ActivatedRouteSnapshot, CanActivate } from '@angular/router'; 

import { Observable } from 'rxjs/Observable'; 

import { NavigatorService } from '../services'; 

@Injectable() 
export class AppGuard implements CanActivate { 
    constructor(private navigatorService: NavigatorService) { } 

    canActivate(next: ActivatedRouteSnapshot) { 
     console.log(next); 

     this.navigatorService.toggleNavigation(next.url[0].path); 

     // for now returning Observable of true... 
     // will be changed when extra functionality is added 
     return Observable.of(true); 
    } 
} 

응용 프로그램 구성 요소

import { Component } from '@angular/core'; 

import { NavigatorService } from './shared'; 


@Component({ 
    selector: 'app', 
    styleUrls: [ 
     './app.style.css' 
    ], 
    template: require('./app.component.html') 
}) 
export class AppComponent { 
    showNavigation: boolean = true; 

    constructor(private navigatorService: NavigatorService) { } 

    // button click event 
    toggleNav() { 
     this.navigatorService.displayNavigation 
      .subscribe(res => this.showNavigation = res); 
    } 
} 

응용 프로그램 구성 요소 템플릿

<button (click)="toggleNav()">Toggle Navigation</button> 
<div id="page-wrapper"> 
    <div id="sidebar-wrapper" *ngIf="showNavigation"> 
     <navigation></navigation> 
    </div> 
    <div id="page-content-wrapper"> 
     <main> 
      <router-outlet></router-outlet> 
     </main> 
    </div> 
</div> 

으로 내가 서비스에 가입 할 수 있도록 지금 테스트로 나는 "토글 탐색"버튼을 위해 이상을 볼 수 있습니다. 솔직하게 말해서 이것이 최선의 구현인지 잘 모르겠다. 올바른 방향으로 나아 가지 않을 것이다. 어떻게 든 앱 구성 요소가 항상 "탐색 내역 표시"플래그 값을 인식 할 수있는 방법이 있는지 물어보고 싶습니다.

업데이트 - 문제는 내가 제대로 대답에 저를 이끌어이 question을 따랐습니다

해결.

네비게이터 서비스 나 앱 구성 요소의 ngOnInit 라이프 사이클 후크의 서비스에 가입

import { Injectable } from '@angular/core'; 

import { Observable } from 'rxjs/Observable'; 
import { Subject } from 'rxjs/Subject'; 

@Injectable() 
export class NavigatorService { 
    private showNavigation: Subject<boolean>; 

    constructor() { 
     this.showNavigation = <Subject<boolean>>new Subject(); 
    } 

    get displayNavigation(): Observable<boolean> { 
     return this.showNavigation.asObservable(); 
    } 

    toggleNavigation(urlPath: string) { 
     let showNav: boolean; 
     if (urlPath === 'login') { 
      showNav = false; 
     } else { 
      showNav = true; 
     } 

     this.showNavigation.next(showNav); 
    } 
} 

그리고 :

import { Component, OnInit } from '@angular/core'; 

import { NavigatorService } from './shared'; 

@Component({ 
    selector: 'app', 
    styleUrls: [ 
     './app.style.css' 
    ], 
    template: require('./app.component.html') 
}) 
export class AppComponent implements OnInit { 
    showNavigation: boolean = true; 

    constructor(private navigatorService: NavigatorService) { } 

    ngOnInit() { 
     this.navigatorService.displayNavigation 
      .subscribe(res => this.showNavigation = res); 
    } 
} 

난 아직도 모르겠어요 다음과 같이 나는 탐색 서비스를 업데이트 이것이 최선의 접근 방법이라면 100 % 확실하지만 지금까지 내 문제가 해결되었습니다.

Answer 1

다른 사람들의 참조를 위해 라우터에서만이 작업을 수행 할 수 있습니다. 아래 예제에서 AppComponent의 템플릿에 <router-outlet></router-outlet>이 있고 숨겨진 모든 내용을 DefaultLayoutComponent라는 별개의 레이아웃보기로 옮깁니다.

메뉴/바닥 글 및 <router-outlet></router-outlet>을 DefaultLayoutComponent에 넣으십시오. 이제 DefaultLayoutComponent의 하위 요소 (즉, 아래의 대시 보드 및 초대 구성 요소) 만 공통 레이아웃을 갖게됩니다. 다른 페이지 (예 :아래 로그인)에는 빈 레이아웃이 있습니다.

RouterModule.forRoot([ 
    { path: 'login', component: LoginComponent}, 
    { path: '', component: DefaultLayoutComponent, children: [ 
     { path: '', component: DashboardComponent}, 
     { path: 'dashboard', component: DashboardComponent }, 
     { path: 'invite', component: InviteComponent}] 
    }, 
    { path: '**', redirectTo: ''} 
])