使用 Angular 2/Typescript 在没有要显示的字符串时停止隐藏元素

Question

使用 javascript/typescript 代码，我试图显示一个字符串（一个字母一个字母），它工作得很好。但是在完全显示一个字符串之后，它隐藏了元素，所以底部元素占据了看起来不太好的空间。我希望那个空间永远存在，无论它是否包含字符串。

你可以在这里玩：https://plnkr.co/edit/mbZDrlOSI1vnjIrSMcNq?p=preview

@Component({
  selector: 'my-app',
  template: `
    <div>
      <div #text1></div>
      <div>Do you really think?</div>
    </div>
  `,
})
export class App {
  @ViewChild('text1') text1:ElementRef;

  ngAfterViewInit()
  {
    this.printLetterByLetter(this.text1, "Angular2 is awesome", 200)
  }

  printLetterByLetter(destination:ElementRef, message:string, speed:number){
    let i = 0;
    destination.nativeElement.innerHTML = "";
    let interval = setInterval(()=>{
      console.log(i);
        destination.nativeElement.innerHTML += message.charAt(i);
        i++;
        if (i > message.length){
            this.printLetterByLetter(this.text1, "Angular2 is awesome", 200)
            clearInterval(interval);
        }
    }, speed);
  }
}

Answer 1

为元素设置高度

<div #text1 [style.height.em]="1"></div>

Plunker example

Answer 2

我想到的几种方法是：

你可以给一个最小高度的样式：

<div style="min-height: 18px" #text1></div>

Plunker：https://plnkr.co/edit/LR2m8TymNBeExwG0pDq2?p=preview

或者用空字符串""初始化string