使动态组件适合：margin/padding 变化：更好的方法？

Question

我希望显示警报 within/above 我的静态 bootstrap v4 导航栏。

所以我得到了这个简单的服务：

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

@Injectable()
export class AppService {
  private _navbarPadding: number = 50;
  navbarPaddingChange: Subject<number> = new Subject();

  constructor() {
    this.navbarPadding = this._navbarPadding;
  }

  get navbarPadding(): number {
    return this._navbarPadding;
  }

  set navbarPadding(val: number) {
    this._navbarPadding = val;
    this.navbarPaddingChange.next(this._navbarPadding);
  }
}

我在任何地方注入，包括侧边栏（下方）和 'main body':

import { Component, OnInit, OnDestroy } from '@angular/core';
import { AppService } from '../app.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-sidebar',
  templateUrl: './sidebar.component.html',
  styleUrls: ['./sidebar.component.css']
})
export class SidebarComponent implements OnInit, OnDestroy {
  navbarPadding: number;
  subNavbarPadding: Subscription;

  constructor(public appService: AppService) {}

  ngOnInit() {
    this.navbarPadding = this.appService.navbarPadding;
    this.subNavbarPadding = this.appService.navbarPaddingChange.subscribe(val =>
      this.navbarPadding = val
    );
  }

  ngOnDestroy() {
    this.subNavbarPadding.unsubscribe();
  }
}

那么我得到了这个函数：

addAlert() {
    this.appService.navbarPadding += 81;
    this.alertsService.alerts.push({
      type: 'info',
      msg: 'INFO'
    })
}

边栏html（第一行）：

<div class="col-sm-3 col-md-2 sidebar" [style.margin-top.px]=navbarPadding>

…而且效果很好。 但是…这一定是个糟糕的主意。它到处都有沉重的耦合。什么是正确的 Angular2 方法？

Answer 1

一般来说，这是一种有效的方法，但是，我建议在使用 Observables:[=20 时使控制器尽可能简单并使用 async-pipe =]

您的服务（使用 BehaviorSubject 而不是 Subject，尽管恕我直言，getter 和 setter 可能也可以，并且在 addAlert然后你可以只使用 this.appService.navbarPadding$.next(131)):

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

@Injectable()
export class AppService {
  private _navbarPadding: number = 50;
  navbarPadding$: BehaviorSubject<number> = new BehaviorSubject(this._navbarPadding);

  constructor() {
  }

  get navbarPadding(): number {
    return this._navbarPadding;
  }

  set navbarPadding(val: number) {
    this._navbarPadding = val;
    this.navbarPadding$.next(this._navbarPadding);
  }
}

该组件保持在最低限度（无手动订阅）：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { AppService } from '../app.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-sidebar',
  templateUrl: './sidebar.component.html',
  styleUrls: ['./sidebar.component.css']
})
export class SidebarComponent implements OnInit, OnDestroy {
  constructor(public appService: AppService) {}
}

您的模板（异步管道自动处理订阅）：

<div class="col-sm-3 col-md-2 sidebar" [style.margin-top.px]="appService.navbarPadding$ | async">

由于您的方法类似于 ngrx you might want to check out the ngrx-store，它为您提供了一种非常好的方式来处理这些应用程序状态，例如您的填充。

使动态组件适合：margin/padding 变化：更好的方法？

Making dynamic Components fit: margin/padding changes: better way?

twitter-bootstrap

angular

rxjs

angular2-template

angular2-services