Question

我已经建立了一个带有几页和固定顶部导航栏的SPA。我想为每个页面中标题下方的内容设置动态页边距顶部，这会在加载或调整特定页面时自动设置。

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

//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）组件“记住”设置？（注意：加载时由于某种原因不计算保证金 - 无论如何，它是在localhost上计算的 - 所以请调整窗口大小来计算保证金。很抱歉。保证金仅在menu1中设置用于演示目的但是如果/当我有解决方案时，为每个页面设置。）

Answer 1

如果要记住值，请使用BehaviorSubject。它始终是最后一个值，直到可观察完成。

marginTop = new BehaviorSubject<number>(0);

另外，请不要忘记取消订阅您的＆＃39; this._sharedService.marginTop $ .subscribe＆＃39;在ngOnDestroy方法中订阅。

单击后动态设置Angular 2重置的边距

1 个答案: