现状

Question

我正在努力使用ngStyle指令在角度2中设置子标记的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"
}

我知道我可以使用组件控件中的styles数组来影响css样式（虽然由于封装（我认为）它必须进入自己的css样式表，而不是组件的样式其他明智的它只影响一些属性），我也可以使用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;
    }
}

由于旋转器有气泡，但是：

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

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

Answer 1

它不是角度世界中的最佳替代方案，但如果ion-spinner没有为内部<circle>元素提供任何类型的“挂钩”，则可以获得对HTMLElement元素的引用1}}实例（通过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; })
  }

}

Answer 2

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

return redirect()->route("Roles")->with([
  "key1" => "value1", 
  "key2" => "value2" 
]);

在Angular 2中动态设置子项的css属性

现状

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

2 个答案: