Question

我想知道是否可以通过＆＃39;样式来设置组件的样式。角度＆＃39; @component对象的属性。

以下是我尝试实现的示例，注意＆＃39;样式中的{{ratio}}变量＆＃39;属性。

@Component({
 selector: 'img-thumb',
 templateUrl: './img-thumb.component.html',
 styleUrls: ['./img-thumb.component.css'],
 styles: [`
   :host:after{
     content: '';
     display: block;
     padding-bottom: {{ratio}};
   }
 `],
 host: {
  '[style.height.px]' : 'height',
  '[style.padding.px]' : 'gap'
 } 
})

export class ImgThumbComponent implements OnInit {

 @Input() height : any
 @Input() gap : any
 @Input() ratio : any

 //More code...

 }

基本上我试图实现：在带有变量的主机上之后。如果可能的话，我更喜欢在组件的.ts文件中实现它。

Answer 1

由于无法添加内联伪元素样式，因此一种解决方法是使用Angular的renderer2方法创建新的<style>标记，并在运行时将其附加到DOM。这是一个组件：

import { Component, ElementRef, ViewChild, OnInit, Renderer2 } from '@angular/core';

@Component({
    selector: 'app-component',
    template: '<div #stylesContainer></div>'
})
export class singleComp implements OnInit{
    // Get destination container
    @ViewChild("stylesContainer") private stylesDist: ElementRef;

    // Define variable values
    height: string = "150px";
    gap: string = "30px";
    ratio: string = "10px";

    // Create the actual CSS style and store it in variables
    styleClass = ".class{ height: "+this.height+"; padding: "+this.gap+"}";
    pseudoStyle = ".class:after{content: '';display: block;padding-bottom: "+this.ratio+"}";

    constructor(private renderer: Renderer2) {}

    ngOnInit() {
        // Dynamically create the CSS tags
        const classStyle = this.renderer.createText(this.styleClass);
        const pseudoElementStyle = this.renderer.createText(this.pseudoStyle);

        // Insert the previously defined style into a new <style> element
        const newStyleElement = this.renderer.createElement('style');
        this.renderer.appendChild(newStyleElement, classStyle);
        this.renderer.appendChild(newStyleElement, pseudoElementStyle);
        this.renderer.appendChild(this.stylesDist.nativeElement, newStyleElement);
    }
}

在上面的组件中，变量height，gap和ratio都是硬编码的，但您可以通过@input获取它们。 HTML模板包含div，其中包含本地引用#stylesContainer，这将是动态附加样式的目标元素。

当组件初始化时，它会生成一个新的<style>标签，其中包含动态样式，包括伪元素样式。然后使用Angular中的Renderer2，它将新的<style>标记重新附加到使用<div #stylesContainer>

获得的@ViewChild中

Angular 4 - 带变量的样式组件

1 个答案: