使动态组件适合：边距/填充更改：更好的方法？

Question

我希望在我的静态引导 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);
  }
}

我到处都注入了，包括侧边栏（下）和“主体”：

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 时使用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，您可能需要查看ngrx-store，它为您提供了一种非常好的方式来处理那些类型的应用程序状态，例如您的填充。