멀리 클릭 한 후 각도 2의 여백을 동적으로 설정합니다.

Question

페이지 몇 개와 고정식 상단 네비게이션으로 SPA를 구축했습니다. 특정 페이지가로드되거나 크기가 조정될 때 자동으로 설정되는 모든 페이지의 헤더 아래에 동적 마진을 설정하고 싶습니다.

구성 요소가 형제이기 때문에 둘 사이에서 통신하기 위해 공유 서비스를 설정했습니다.

//header.component.ts 

export class HeaderComponent { 
    @HostListener('window: load') calcNavbarHeightOnLoad() { 
    this.getNavbarHeight(); 
    } 
    @HostListener('window: resize') calcNavbarHeightOnResize() { 
    this.getNavbarHeight(); 
    } 

    constructor(private _sharedService: SharedService) { 

    } 

    getNavbarHeight() { 
    const navbar = document.querySelector('.navContainer'); 
    const navbarHeight = navbar.clientHeight; 
    console.log(navbarHeight); 
    this._sharedService.setMarginTop(navbarHeight); 
    } 
} 

및 Menu1Component에 데이터를 전달합니다 :

//shared.service.ts 

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

@Injectable() 
export class SharedService { 
    marginTop = new Subject<number>(); 
    marginTop$ = this.marginTop.asObservable(); 
    setMarginTop(data: number) { 
    this.marginTop.next(data); 
    } 
} 

그것은 네비게이션 바의 높이를 가져옵니다 내가 다른 페이지 (메뉴 2)에 클릭 할 때까지 잘 작동하고

//menu1.component.ts 

export class Menu1Component implements AfterViewInit { 
    marginTop: number; 
    constructor(private _sharedService: SharedService) { 

    } 

    ngAfterViewInit() { 
    this._sharedService.marginTop$.subscribe(
     data => { 
     this.marginTop = data; 
     }); 
    } 
} 

. 방문 페이지 (menu1)로 돌아 가면 여백이 사라집니다. 나는 또한없는 성공과 HeaderComponent에 라이프 사이클 후크를 시도

https://plnkr.co/edit/djZaAVdZie2s132MHbLh?p=preview

:

데모를 참조하십시오.

어떻게 방문 페이지 (menu1) 구성 요소가 설정을 "기억"하도록 여백을 설정할 수 있습니까? (참고 : 여백은 로딩시 여기에 계산되지 않습니다 - 어쨌든, 그것은 localhost에서 계산됩니다 - 그래서 pls는 계산 된 마진을 얻기 위해 윈도우의 크기를 조정합니다 미안 해요 마진은 데모 목적으로 menu1에서만 설정됩니다. 만약 솔루션이 있다면 모든 페이지에 대해 설정해야합니다.)

Answer 1

값 사용 BehaviorSubject를 기억하고 싶다면. 관측 대상이 완료 될 때까지 항상 마지막 값을 방출합니다.

marginTop = new BehaviorSubject<number>(0); 

또한 ngOnDestroy 방법에 'this._sharedService.marginTop $ .subscribe'가입에서 탈퇴하는 것을 잊지 마세요.