1

編集済み/個人情報用のディレクティブを作成しようとしています。特定の情報が提供されていない場合は、ブラック ボックスを表示する必要があります (あたかもコンテンツがそこにあったが、ブラック ボックスで非表示にされたかのように)。

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 が表示されません。

4

1 に答える 1