我正在努力使用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] 删除。
我来说两句