Gewusst wie: aktualisieren Sie html-element nach dem ändern element

Habe ich versucht zu drucken, nachdem ändern von html-element, aber das element nicht verändert wurde. (Angular2)
Dieser source-code ist vereinfacht ein.

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

Und wenn Sie auf eine Schaltfläche klicken, wird das folgende Ereignis.

    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); 
  }

Aber die Inhalte sind Elemente, bevor Sie Sie ändern.
Wie kann ich die refresh-Elemente?

  • Was ist der Zweck dieser. Ich kann keinen Sinn dieses Codes. Angular2 kümmert sich nicht um HTML-fügen Sie dynamisch. Was genau updaten soll?
  • Ich brauche zum ändern des Layouts beim drucken. Das ist, warum ich brauchen, um Bearbeiten von html. Ich erwähnte Angular2 im Fall, dass die Menschen nicht wissen, Angular2
InformationsquelleAutor user3289230 | 2016-06-28
  1. 0

    Aktualisieren Sie die Elemente, die Sie benötigen zum auslösen des change-detection.
    Hier ist ein sehr guter Beitrag über die Erkennung von änderungen in den Winkel-2: http://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html

    Habe ich einen plunker hier, um es zu illustrieren:
    http://plnkr.co/edit/0ZwkaQ776mKpLYZJogYx?p=preview

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

    Auch Sie sollte nicht ändern Sie die DOM-Elemente direkt, sollten Sie eine Komponente erstellen und verwenden einer strukturellen Richtlinie anzeigen (hier hat die Komponente eine auswahlelement ""meine-print"):

    <my-print *ngIf="isPrint" [iframeSrc]="..."></my-print>
    InformationsquelleAutor Pierre Urban
Schreibe einen Kommentar