사용자 지정 지시문이 작동하지 않습니다.

Question

수정 된/개인 정보에 대한 지시문을 만들려고합니다. (내용이 있었다하지만 블랙 박스에 보이지 않는 만든 것처럼) 나는 스타일이 추가되는 것을 볼 수 있습니다

<a appRedactedContent></a> 

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-tag를 열었을 때

Answer 1

인라인의 기본 표시로 태그를 적용 할 수 없습니다. 너비와 높이가 동일하지 않습니다. 당신의 태그는 0의 폭과 콘텐츠를 가지고 있지 않으며, 당신은 폭을 적용하려는 경우 다음 그것을

을 볼 수 없습니다으로

, 당신은 인라인 블록을 할

를 그 표시를 설정해야

ref to HTML specs