Angular 4 风格父级和路由器插座

Question

假设我们有以下代码：

<div class="container">
    <div class="row">
        <div class="col-sm-4 col-md-3">
            <app-sidebar></app-sidebar>
        </div>
        <div class="col-sm-8 col-md-9">
            <router-outlet></router-outlet>
        </div>
    </div>
</div>

当 router-outlet 获取的组件是 myComponent 时，我想为

<div class="col-sm-8 col-md-9">

提供彩色背景。这样做的目的是我希望背景颜色占据列的所有宽度。

有人有窍门吗？

Answer 1

您可以通过以下方式完成这项工作：

[style.background-color]="getBackgroundColor()"

在你的component.ts中：

constructor(private router: Router) { }

ngOnInit() {
    this.router.events.subscribe((route: any) => this.route= route);
}
getBackgroundColor() {
    if (this.url) {
        if (this.route.url === '/yourRoute'{
        return 'white'
        } else {
        return '#6772e5'
        }
    } else {
        return '#6772e5'
    }
}

Answer 2

有几种方法可以做到这一点。如果您希望父组件在某个子组件处于活动状态时更改样式，则需要一些编码才能解决。

方法一：共享服务

您需要创建一个共享服务来控制父组件订阅的状态。 “emitChange”方法将更改状态“fillColorSubject”，该状态作为可观察的“fillColor”返回以进行订阅。

填充颜色服务.ts：

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

@Injectable()

export class FillColorService {
    private fillColorSubject = new Subject<boolean>();
    fillColor = this.fillColorSubject.asObservable();
    emitChange(fill : boolean) {
        this.fillColorSubject.next(fill);
    }
}

子组件将在初始化和销毁时向服务发出更改。

my.component.ts：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { FillColorService } from 'fill-color-service';

@Component( {
  templateUrl: 'my.component.html'
} )

export class myComponent implements OnInit, OnDestroy {

  constructor ( private _fillColorService: FillColorService ) {
  }

  ngOnInit() {
    this._fillColorService.emitChange(true);
  }

  ngOnDestroy() {
    this._fillColorService.emitChange(false);
  }
}

现在父组件需要订阅该服务。当状态改变时，一个开关（fillColumn）将改变列状态。

parent.component.ts:

import { Component } from '@angular/core';
import { FillColorService } from 'fill-color-service';

@Component( {
  templateUrl: 'parent.component.html'
} )

export class parentComponent {
  fillColumn : boolean;

  constructor ( private _fillColorService: FillColorService ) {
    _fillColorService.fillColor .subscribe(
      fill => {
        this.fillColumn = fill;
      });
  }
}

您的模板需要能够通过条件类反映更改。

parent.component.html:

<div class="container">
    <div class="row">
        <div class="col-sm-4 col-md-3">
            <app-sidebar></app-sidebar>
        </div>
        <div class="col-sm-8 col-md-9" [ngClass]="{ 'fill': fillColumn }">
            <app-component></app-component>
        </div>
    </div>
</div>

方法2：从Child发出事件

此方法不起作用，因为它不允许绑定。您需要为此定义自己的选择器。除了通过直接事件绑定之外，此方法与共享服务的思路相同。

首先，父类有一个方法（fillColor），可以触发该方法来改变开关（fillColumn）。

parent.component.ts:

import { Component } from '@angular/core';

@Component( {
  templateUrl: 'parent.component.html'
} )

export class parentComponent {
  fillColumn : boolean;

  fillColor( fill : boolean = false ) {
    this.fillColumn = fill;
  }
}

然后，子 myComponent 需要发出一个带有布尔值的事件 (fillParentColor) 来触发父组件的更改。

my.component.ts：

import { Component, Output, EventEmitter, OnInit, OnDestroy } from '@angular/core';

@Component( {
  selector: 'app-component',
  templateUrl: 'my.component.html'
} )

export class myComponent implements OnInit, OnDestroy {
  @Output() fillParentColor = new EventEmitter<boolean>();

  ngOnInit() {
    this.fillParentColor.emit(true);
  }

  ngOnDestroy() {
    this.fillParentColor.emit(false);
  }
}

最后，您的模板需要能够在发出子事件时触发父组件事件。当 myComponent 的“fillParentColor”事件被触发时，parentComponent 的“fillColor”事件将被触发，并带有一个布尔参数。您还需要根据“fillColumn”开关将条件类（填充）添加到您的列中。

parent.component.html:

<div class="container">
    <div class="row">
        <div class="col-sm-4 col-md-3">
            <app-sidebar></app-sidebar>
        </div>
        <div class="col-sm-8 col-md-9" [ngClass]="{ 'fill': fillColumn }">
            <app-component (fillParentColor)="fillColor($event)"></app-component>
        </div>
    </div>
</div>

Answer 3

简答 使用：

：主机{背景：矢车菊蓝色； } 作为托管组件的 CSS，用于更改路由器插座的背景。

长答案：Angular CSS 伪选择器/修饰符 您可以使用 :host 修饰符影响托管组件。如果您想更改路由器出口样式，请将 css 添加到将托管的组件中。