使动态组件适合:边距/填充更改:更好的方法? [英] Making dynamic Components fit: margin/padding changes: better way?

问题描述

我希望警报出现在我的静态引导程序 v4 导航栏内/上方.

所以我有这个简单的服务:

import { Injectable } from '@angular/core';从'rxjs'导入{主题}；@Injectable()导出类 AppService {私人 _navbarPadding: number = 50;navbarPaddingChange:主题<数字>= 新主题()；构造函数(){this.navbarPadding = this._navbarPadding;}获取 navbarPadding(): number {返回 this._navbarPadding;}设置 navbarPadding(val: number) {this._navbarPadding = val;this.navbarPaddingChange.next(this._navbarPadding);}}

我到处注入的内容，包括侧边栏(下方)和主体":

import { Component, OnInit, OnDestroy } from '@angular/core';从 '../app.service' 导入 { AppService };从'rxjs'导入{订阅}；@成分({选择器:'应用侧边栏'，templateUrl: './sidebar.component.html',styleUrls: ['./sidebar.component.css']})导出类 SidebarComponent 实现 OnInit、OnDestroy {导航栏填充:数字；subNavbarPadding:订阅；构造函数(公共应用服务: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({类型:'信息'，msg: '信息'})}

侧边栏 html(第一行):

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

解决方案

总的来说，这是一种有效的方法，但是，我建议保持控制器尽可能简单并使用 async-pipe 使用 Observables 时:

您的服务(使用 BehaviorSubject 代替 aa Subject，不过恕我直言，getter 和 setter 也可以使用，并且在 addAlert 中，您然后可以使用 this.appService.navbarPadding$.next(131)):

import { Injectable } from '@angular/core';从'rxjs'导入{主题}；@Injectable()导出类 AppService {私人 _navbarPadding: number = 50;navbarPadding$: BehaviorSubject= new BehaviorSubject(this._navbarPadding);构造函数(){}获取 navbarPadding(): number {返回 this._navbarPadding;}设置 navbarPadding(val: number) {this._navbarPadding = val;this.navbarPadding$.next(this._navbarPadding);}}

组件保持在最低限度(无手动订阅):

import { Component, OnInit, OnDestroy } from '@angular/core';从 '../app.service' 导入 { AppService };从'rxjs'导入{订阅}；@成分({选择器:'应用侧边栏'，templateUrl: './sidebar.component.html',styleUrls: ['./sidebar.component.css']})导出类 SidebarComponent 实现 OnInit、OnDestroy {构造函数(公共应用服务:AppService){}}

您的模板(异步管道自动处理订阅):

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

由于您的方法类似于 ngrx，您可能想查看 ngrx-store，它为您提供了一种非常好的方式来处理这些类型的应用程序状态，例如填充.

I want alerts to appear within/above my static bootstrap v4 navbar.

So I've got this simple service:

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

Which I inject everywhere, including sidebar (below) and '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();
  }
}

Then I've got this function:

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

Sidebar html (first line):

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

…and it works just fine. But… this must be a terrible idea. It has heavy coupling everywhere. What's the correct Angular2 approach?

解决方案

In general, this is a valid approach, however, I would recommend keeping the controller as simple as possible and making use of the async-pipe when working with Observables:

Your Service (uses BehaviorSubject instead a a Subject, though imho the getter and setter could probably go as well, and in the addAlert you then could just use 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);
  }
}

The component is kept to a bare minimum (no manual subscriptions):

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) {}
}

Your template (the async-pipe automatically handles the subscription):

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

Since your approach is similar to ngrx you might want to check out the ngrx-store, which provides you with a very nice way of handling exactly those kind of application-states, like your padding.

这篇关于使动态组件适合:边距/填充更改:更好的方法?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！