在 Angular 中动态设置边距 2 在点击离开后重置

Question

我已经构建了一个 SPA，其中包含几个页面和一个固定的顶部导航栏。我想为每个页面中 header 下面的内容设置一个动态边距顶部，它会在加载特定页面或调整大小时自动设置。

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

//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) 组件 "remembers" 设置？（注意：加载时出于某种原因此处不计算边距 - 无论如何，它是在本地主机上计算的 - 所以请调整 window 的大小以计算边距。抱歉。边距仅在 menu1 中设置演示目的，但将为每个页面设置 if/when 我有解决方案。）

Answer 1

如果您想记住该值，请使用 BehaviorSubject。它总是会输出最后一个值，直到 observable 完成。

marginTop = new BehaviorSubject<number>(0);

另外不要忘记在 ngOnDestroy 方法中取消订阅 'this._sharedService.marginTop$.subscribe'。

在 Angular 中动态设置边距 2 在点击离开后重置

Dynamically set margin in Angular 2 resets after clicking away

angular2-services

angular