2016-06-28 7 views
1

html要素を変更した後に印刷しようとしていますが、要素が変更されていません。 (Angular2) このソースコードは単純化されたものです。要素を変更した後にhtml要素を更新する方法

<div *ngIf="displayType === 'screen'"> 
     <div>This is Screen</div> 
</div> 
<div *ngIf="displayType === 'print'"> 
     <div>This is Print</div> 
</div> 

ボタンをクリックすると、次のイベントが表示されます。

displayType: string = 'screen'; // default 
    OnPrint() { 
      this.displayType = 'print'; 
      let tmp = document.createElement('div'); 
      let el = this.elementRef.nativeElement.cloneNode(true); 

      tmp.appendChild(el); 

      let content = tmp.innerHTML; 
      let frame1 = document.createElement('iframe'); 
      document.body.appendChild(frame1); 
      let frameDoc = frame1.contentWindow;  
      frameDoc.document.open(); 
      frameDoc.document.write('<html><body>'+content+'</body></html>'); 
      frameDoc.document.close(); 

      setTimeout(function() { 
       window.frames["frame1"].focus(); 
       window.frames["frame1"].print(); 
       document.body.removeChild(frame1); 
      }, 500); 
    } 

ただし、内容は変更前の要素です。 要素を更新するにはどうすればよいですか?

+0

これは何を目的としていますか。私はこのコードを理解できません。 Angular2は、動的に追加するHTMLは気にしません。正確に何を更新する必要がありますか? –

+0

印刷時にレイアウトを変更する必要があります。だから私はhtmlを変更する必要があります。人々がAngular2を知らない場合、Angular2について言及しました – user3289230

答えて

0

変更検出をトリガーする必要がある要素をリフレッシュするには、ここ は角2の変化の検出については非常に良い記事です:http://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html

私はそれを示すために、ここではplunkerを作成しました: http://plnkr.co/edit/0ZwkaQ776mKpLYZJogYx?p=preview

<button (click)="OnPrint()">OnPrint</button> 

また、あなたは、あなたに直接DOM要素を変更しないでくださいコンポーネントを作成し、構造ディレクティブを使用して表示する必要があります(このコンポーネントにはセレクタ「my-print」があります)。

<my-print *ngIf="isPrint" [iframeSrc]="..."></my-print> 
関連する問題