[英]How to display value from the css file to console via console.log
in this tutorial在本教程中
https://www.tektutorialshub.com/angular/custom-directive-in-angular/
the directive works as expected.该指令按预期工作。 however i would like to display the value of the color set on the console via
但是我想通过在控制台上显示颜色设置的值
console.log
please have a look at my attempt in the code posted below, i used请看看我在下面发布的代码中的尝试,我用过
console.log(this.ttClass);//<---my attempt. it did not work
inside OnInit() but it did not work在 OnInit() 内部,但它不起作用
please let me know how to display the value of the color from the css file on the console请让我知道如何在控制台上显示 css 文件中的颜色值
app.component.ts : 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 : 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 : app.coponent.html :
<button [ttClass]="'blue'">Click Me</button>
app.coponent.css : app.coponent.css :
.blue {
background-color: lightblue;
} }
app.component.html : app.component.html :
<h1 my-error>Hello {{name}}</h1>
<h2 *myCustomIf="condition">Hello {{name}}</h2>
<button (click)="condition = !condition">Click</button>
image :图片:
Working solution: https://stackblitz.com/edit/angular-jcia4c?file=src%2Fapp%2Ftt-class.directive.ts工作解决方案: https://stackblitz.com/edit/angular-jcia4c?file=src%2Fapp%2Ftt-class.directive.ts
Also, styles should ALWAYS
be modified via Renderer2
in angular and not by directly accessing the nativeElement
.此外,styles 应
ALWAYS
通过 angular 中的Renderer2
进行修改,而不是直接访问nativeElement
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.