在本教程中
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>
图片：