Angular2/Typescriptを使用して表示する文字列がない場合、hidding要素を停止します。

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> 

プランカ：https://plnkr.co/edit/LR2m8TymNBeExwG0pDq2?p=preview

空の文字列""