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

朗巴蒂诺

我正在努力使用ngStyle指令在angular 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”

初级

它不是角度世界中的最佳替代方法,但是如果ion-spinner不能为内部<circle>元素提供任何“钩子”,则可以引用它们的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; })
  }

}

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章