テンプレート補間後の指示文からinnerhtmlにアクセスする方法

Question

私は省略記号と呼ばれるこのような指示文を持っています。

@Directive({ 
    selector: '[ellipsis]' 
}) 
export class EllipsisDirective implements OnInit, AfterContentInit { 

    constructor(private el: ElementRef,private renderer: Renderer2) { 
     console.log(el); 
    } 

    truncateText() { 
     let el = this.el.nativeElement; 
     var wordArray = el.innerHTML.split(' '); 
     while(el.scrollHeight > el.offsetHeight) { 
      wordArray.pop(); 
      el.innerHTML = wordArray.join(' ') + '...'; 
     } 
    } 

    ngOnInit(): void { 
    } 

    ngAfterContentInit(): void { 
     this.truncateText(); 
    } 
} 

問題はinnerHTMLが空であることである：

<p class="card-text" ellipsis>{{ description }}</p> 

そして、ここでは、ディレクティブです：私はこのようにそれを使用します。しかし元の{{ description }}はそうではありません。私は間違って何をしていますか？

Answer 1

非常に直感的ではありませんが、ngAfterViewCheckedが動作しているようです。私はすべてのイベントを試みた。

ngAfterViewChecked() { 
    this.truncateText(); 
}