自定义指令不起作用

Question

我正在尝试为 redacted/private 信息创建指令。如果未提供某些信息，则应显示黑框（就好像内容在那里，但用黑框隐藏了一样）

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

Answer 1

标签作为内嵌的默认显示，您不能强制要求宽度和高度。

因为你的a标签没有内容所以宽度为0所以你看不到它

如果你想强制宽度，你必须将其显示设置为内联块

ref to HTML specs

自定义指令不起作用

custom directive not working

angular

angular2-directives

angular-directive

custom-directive