在点击离开后动态设置角度2中的边距重置

我已经构建了一个SPA页面和一个固定的顶部导航栏。我希望为每个页面的标题下方的内容设置一个动态的页边距顶端，当页面被加载或调整大小时会自动设置。在点击离开后动态设置角度2中的边距重置

由于组件是兄弟，所以我建立了一个共享服务来在它们之间进行通信。

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

它让导航栏的高度：

//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：

//menu1.component.ts 

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

    } 

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

它的工作顺利，直到我点击到另一个页面（MENU2）。当我回到目标页面（menu1）时，边距消失。

观看演示：

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

我也试过没有成功的HeaderComponent生命周期挂钩。

如何设置页边距以便登录页面（menu1）组件“记住”设置？（注意：由于某些原因，加载时边距不计算 - 无论如何，它是在本地主机上计算的 - 所以请调整窗口大小来计算边距。关于这一点，我们只能在菜单1中设置边距。如果/当我有解决方案时，为每个页面设置。）

来源

2017-04-16 arpadt

你搞砸了代码！为什么使用科目？ – Aravind

你的问题编辑和解决https://plnkr.co/edit/rSc0Fq3Orpv5xWWNjgzs?p=preview –

@BabarBilal，真棒，它的工作就像魅力！干杯 – arpadt

如果你想记住值使用BehaviorSubject。它将始终emt最后的值，直到可观察结束。

marginTop = new BehaviorSubject<number>(0);

也不要忘记从你的 'this._sharedService.marginTop $ .subscribe' 在ngOnDestroy方法订阅退订。

来源

2017-04-16 20:13:14

它的工作，谢谢！ – arpadt

在点击离开后动态设置角度2中的边距重置

回答

相关问题