Javascript 如何通过console.log将css文件中的值显示到控制台

在本教程中

https://www.tektutorialshub.com/angular/custom-directive-in-angular/

该指令按预期工作。但是，我希望通过显示控制台上设置的颜色值

console.log

请看一下我在下面的代码中的尝试，我使用了

    console.log(this.ttClass);//<---my attempt. it did not work
    

tt类指令.ts：

import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'ngDirective2';
}

import { Directive, ElementRef, Input, OnInit } from '@angular/core'
@Directive({
  selector: '[ttClass]'
})
export class TtClassDirective implements OnInit{

  @Input() 
  ttClass : string  ="";

  ngOnInit() {
    this.el.nativeElement.classList.add(this.ttClass);
    console.log(this.ttClass);//<---my attempt. it did not work
  }
  constructor(private el: ElementRef) { }

}

<button [ttClass]="'blue'">Click Me</button>

.blue {
background-color: lightblue;

<h1 my-error>Hello {{name}}</h1>
<h2 *myCustomIf="condition">Hello {{name}}</h2>
<button (click)="condition = !condition">Click</button>

}

app.component.html：

import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'ngDirective2';
}

import { Directive, ElementRef, Input, OnInit } from '@angular/core'
@Directive({
  selector: '[ttClass]'
})
export class TtClassDirective implements OnInit{

  @Input() 
  ttClass : string  ="";

  ngOnInit() {
    this.el.nativeElement.classList.add(this.ttClass);
    console.log(this.ttClass);//<---my attempt. it did not work
  }
  constructor(private el: ElementRef) { }

}

<button [ttClass]="'blue'">Click Me</button>

.blue {
background-color: lightblue;

<h1 my-error>Hello {{name}}</h1>
<h2 *myCustomIf="condition">Hello {{name}}</h2>
<button (click)="condition = !condition">Click</button>

Hello{{name}
你好{{name}
点击

图像：

工作解决方案：

import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'ngDirective2';
}

import { Directive, ElementRef, Input, OnInit } from '@angular/core'
@Directive({
  selector: '[ttClass]'
})
export class TtClassDirective implements OnInit{

  @Input() 
  ttClass : string  ="";

  ngOnInit() {
    this.el.nativeElement.classList.add(this.ttClass);
    console.log(this.ttClass);//<---my attempt. it did not work
  }
  constructor(private el: ElementRef) { }

}

<button [ttClass]="'blue'">Click Me</button>

.blue {
background-color: lightblue;

<h1 my-error>Hello {{name}}</h1>
<h2 *myCustomIf="condition">Hello {{name}}</h2>
<button (click)="condition = !condition">Click</button>

---

此外，样式应始终通过角度的

渲染器2

进行修改，而不是直接访问

nativeElement

我是否正确理解您希望将其视为输出

浅蓝色

？如果是这样的话，我认为你不能像你描述的那样做。你应该有自己的预处理器（我真的看不出你为什么要这样做），或者我只是缺少了一些东西。@pesoklp13是的，你说得对。.我想在浏览器的控制台上显示颜色我只是缺少目的。你为什么要那样做？原因是什么？是否要基于该值执行某些特定逻辑？如果是这样的话，你肯定应该尝试使用不同的常用方法。如果您已经知道ccs类的名称，那么应该能够直接使用颜色。如果您需要依赖主题，那么主题应该是已知的变量，因此您应该能够计算您的语句。但这只是我的猜测。@pesoklp13我刚刚接触angular，我想知道实现这一目标的推荐方法issue@user2121，看看我的答案。至少我知道一些新的东西，但我仍然不明白这样做的必要性：DA完整的解释可以在这里找到：。此外，TL；DR：“允许直接访问DOM会使您的应用程序更容易受到XSS攻击。”Render2会解决这个问题，