Angular 4 - 带有变量的样式组件答案

【问题标题】：Angular 4 - Styling component with variablesAngular 4 - 带有变量的样式组件
【发布时间】：2018-03-26 09:46:49
【问题描述】：

我想知道是否可以通过 Angular 的 @component 对象的 '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...

 }

基本上，我正在尝试使用变量在主机上实现 :after 。如果可能的话，我更喜欢在组件的 .ts 文件中实现它。

【问题讨论】：

插值语法仅适用于模板，不适用于样式。
@jonrsharpe 感谢您的快速回答。我使用插值语法来演示我想要实现的目标。
您可以访问img-thumb.component.html 文件吗？如果您愿意修改该文件，我将使用[ngStyle] 属性投标语法直接在HTML 元素上使用@input 变量的值。
@Treeindev 是的，我可以随意修改 html 文件。虽然我不确定如何使用 [ngStyle] 在主机组件上添加 :after？
如果您想从班级访问主机，请参见例如stackoverflow.com/a/34643330/3001761

标签： angular typescript

【解决方案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> 标记附加到您使用 @ViewChild 获得的 <div #stylesContainer> 中

【讨论】：

您好，非常感谢您抽出宝贵时间，非常感谢。您的解决方案解决了这个问题，但是，它在组件内创建了一个全新的 html，其中包含我的 index.html 拥有的所有依赖项。这会导致两个主要问题： 1. 由于我在整个应用程序中大量使用这个组件，它会非常严重地影响性能。 2.创建的html有自己的head和body标签，我公司的一些同事说这可能是一个SEO问题。
它不应该在里面创建一个新的整个html，而只是创建一个新的<style>标签元素并将其附加到容器中。你把本地参考#stylesContainer放在哪里？