动态设置 Angular 中的 child 的 css 属性 2

Question

我正在努力使用 ngStyle 指令在 angular 2 中设置 child 标签的 css 属性。

我不确定我尝试将其应用于 SVG 是否会使它复杂化。

现状

我有一个微调器，是这样实现的：

<ion-spinner name="bubbles"></ion-spinner>

我目前的密码是：

@Component({
   selector: 'some-selector',
   template: `
        <ion-spinner name="bubbles"></ion-spinner>
   `
})
export class SomeComponent {
   private someColour: string = "red"
}

我知道我可以使用组件导向器中的样式数组来影响 css 样式（尽管由于封装（我认为）它必须进入它自己的 css 样式sheet，而不是组件的样式，否则它只会影响某些属性），我还可以使用 ngStyle 属性来获得动态 css 样式。但是，元素在 html:

中是这样出来的

<ion-spinner name="bubbles" class="spinner-bubbles">
   <!--template bindings={}-->
   <svg viewBox="0 0 64 64" style="top: 0px; left: 9px; animation-delay: -1000ms; animation-duration: 1000ms;">
      <circle transform="translate(32,32)" r="5"></circle>
   </svg>...
</ion-spinner>

和 css 需要影响 'circle' 标签。我知道我可以使用的 css 是：

ion-spinner  {
    * {
        fill: blue;
    }

    &.spinner-circles circle,
    &.spinner-bubbles circle,
    &.spinner-dots circle {
        fill: blue;
    }
}

因为旋转器有气泡，但是：

如何从选择器内部动态改变颜色？

我正在使用 angular“2.0.0-rc.1”

Answer 1

对特定样式使用CSS class，然后使用the NgClass directive动态更改它

[class.myDynamicClass]="isMyDynamicClassActive"

Answer 2

它不是 angular 世界中的最佳选择，但如果 ion-spinner 不向内部 <circle> 元素提供任何类型的 "hook"，您可以获得对其 HTMLElement 实例的引用（通过 DOM）并进行操作，例如向它们添加类：

import { Component, ViewChild, ContentChild, ElementRef } from '@angular/core';
import { Spinner } from 'ionic?';

@Component({
  selector: 'some-selector',
  template: `
      <ion-spinner name="bubbles"></ion-spinner>
  `,
  directives: [Spinner]
})
export class SomeComponent {

  @ViewChild(Spinner, {read: ElementRef}) spinnerEl: ElementRef;

  ngAfterViewInit() {
    console.log("Spinner ElementRef: ", this.spinnerEl);
    console.log("Spinner ElementRef.nativeElement: ", this.spinnerEl.nativeElement);

    this.addClassForAllCirclesInsideElement(this.spinnerEl.nativeElement, "someClass");
  }

  addClassForAllCirclesInsideElement(nativeElement, classNameToAdd) {
    // direct DOM manipulation...
    let circles = nativeElement.querySelectorAll('circle');
    circles.forEach((circle) => { circle.className += " " + classNameToAdd; })
  }

}

动态设置 Angular 中的 child 的 css 属性 2

Dynamically setting the a css property of a child in Angular 2

css

ionic-framework

ionic2

angular

现状

如何从选择器内部动态改变颜色？