Angular 自定义指令不起作用

我正在尝试为编辑/私人信息创建一个指令。 如果未提供某些信息，则应显示一个黑匣子（好像内容在那里，但用黑匣子使其不可见）

html

---

当我打开开发人员工具时，我可以看到添加的样式，但我在浏览器中看不到蓝色框的a标记

标记作为内联的默认显示，不能强制执行宽度和高度

由于a标记没有内容，因此将其宽度设置为0，这样您就看不到它

如果要强制宽度，必须将其显示设置为“内联块”

---

删除

！重要信息

并将

px

添加到宽度

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

<a appRedactedContent></a>