角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); 
    } 
} 

これは、ナビゲーションバーの高さを取得し、私は別のページ（MENU2）にクリックするまでそれがうまく働いている

//menu1.component.ts 

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

    } 

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

。ランディングページ（menu1）に戻ると、余白が消えます。

デモを参照してください：

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

また、私はありません成功しHeaderComponent上のライフサイクルフックを試してみました。

ランディングページ（メニュー1）コンポーネントが設定を「記憶」するように余白を設定するにはどうすればよいですか？ （注：ロード時に何らかの理由でマージンが計算されません - とにかく、それはlocalhostで計算されるため、マージンを計算するためにウィンドウのサイズを変更します。あなたが値を使用するBehaviorSubjectを覚えておきたい場合は、ページごとに設定してください）。

Answer 1

観測値が完成するまで常に最後の値を出します。

marginTop = new BehaviorSubject<number>(0); 

もngOnDestroy方法であなたの 'this._sharedService.marginTop $ .subscribe' サブスクリプションの購読を解除することを忘れないでください。