Angular 4 - 帶變量的造型組件

Question

我想知道是否可以通過angular的@component對象的'styles'屬性設置組件的樣式。

下面是我試圖實現的一個示例，請注意'styles'屬性中的{{ratio}}變量。

@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