如何在模板插值后从指令访问innerhtml

Question

我有一个这样的指令叫做省略号。我这样使用它：

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

这是指令：

@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是空的。但原来的{{ description }}不是。我究竟做错了什么？

Answer 1

这不是很直观，但ngAfterViewChecked似乎工作。我尝试了所有的活动。

ngAfterViewChecked() {
    this.truncateText();
}