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

初始化""

当没有使用Angular2 / Typescript显示的字符串时停止隐藏元素

2 个答案: