我正在尝试为编辑/私人信息创建指令。 如果没有提供某些信息,则应显示黑匣子(好像内容在那里但是用黑匣子看不见)
import { Directive, ElementRef, Renderer, OnInit } from
'@angular/core';
@Directive({
selector: '[appRedactedContent]'
})
export class RedactedContentDirective implements OnInit {
min = 75;
max = 150;
width = this.randomIntFromInterval(this.min, this.max);
constructor(private el: ElementRef,
private renderer: Renderer) {
}
ngOnInit() {
this.renderer.setElementStyle(
this.el.nativeElement, 'background-color', 'blue !important');
this.renderer.setElementStyle(this.el.nativeElement, 'width',
this.width.toString());
}
randomIntFromInterval(min: number, max: number): number {
return Math.floor(Math.random() * (max - min + 1) + min);
}
}
HTML
<a appRedactedContent></a>
我可以看到在打开开发人员工具时添加的样式,但是我在浏览器中看不到蓝色框的a-tag
答案 0 :(得分:1)
标签作为内联的默认显示,你不能强制执行宽度也不是高度。
由于您的标签没有内容,因此宽度为0,然后您无法看到它
如果要强制执行宽度,则必须将其显示设置为inline-block