如何通過 console.log 將 css 文件中的值顯示到控制台

Question

在本教程中

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

該指令按預期工作。 但是我想通過在控制台上顯示顏色設置的值

console.log

請看看我在下面發布的代碼中的嘗試，我用過

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

在 OnInit() 內部，但它不起作用

請讓我知道如何在控制台上顯示 css 文件中的顏色值

app.component.ts ：

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

tt-class.directive.ts ：

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) { }

}

app.coponent.html ：

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

app.coponent.css ：

.blue {
background-color: lightblue;

}

app.component.html ：

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

圖片：

Answer 1

工作解決方案： https://stackblitz.com/edit/angular-jcia4c?file=src%2Fapp%2Ftt-class.directive.ts

此外，styles 應ALWAYS通過 angular 中的Renderer2進行修改，而不是直接訪問nativeElement 。