Angular2 Dialog Rückruf

Question

Alle, Ich habe eine Angular2-Anwendung. In dieser Anwendung habe ich eine Schaltfläche, die einen Dialog öffnet. In diesem Dialog ist ein einzelnes div, auf das ich reagieren muss. Gibt es eine Möglichkeit, Code in einem Rückruf auszuführen, nachdem der Dialog und alle seine untergeordneten Objekte erstellt wurden?

Der nächstgelegene ich habe ist

<modal #openDialog (focusin)="openExplorer('someData')"> 
... 
</modal> 

Wenn ich mit diesem Ansatz gehen dann ist mein Code get rexecuted wenn ein Benutzer klickt auf die Formularfelder dieses div innen.

// HTML 
<p (click)="openTheDialog(openDialog, 'thisDivRightHere')">Click here to open me, fool</p> 
<modal #openDialog (focusin)="openExplorer('someData')"> 
    <div id="thisDivRightHere"></div> 
</modal> 

// Component 
openTheDialog(dlg, someDiv) void: { 
    this.fooBarService.preformTheAction(someDiv); 
} 

// Service 
preformTheAction = function(someDiv) { 
    $('#' + someDiv).html(new Date()); 
} 

Im obigen Beispiel, ohne (focusin), dann den Griff „thisDivRightHere“ Ich kann nicht

bekommen, aber wenn ich (focusin) Ich kann aber das Datum mit jedem Somethings interagierten ändert .

Answer 1

Ich löste es durch setTimeout Verwendung für das Element zu warten und einen sorgfältig platzierten Rückruf

// HTML 
<p (click)="openTheDialog(openDialog)">Click here to open me, fool</p> 
<modal #openDialog (onOpen)="openIt(openDialog, 'thisDivRightHere')" > 
    <div id="thisDivRightHere"></div> 
</modal> 

tester(someDiv, dialog, callback): void { 
    var checkExist = setInterval(function() { 
     if ($('#'+someDiv).length) { 
      console.log("Exists!"); 
      clearInterval(checkExist); 
      callback(dialog); 
     } 
    }, 100); // check every 100ms 
}  

// Component 
openTheDialog(dlg) { 
    dlg.open(); 
} 

openIt(dlg, someDiv) void: { 
    this.tester(someDiv, this.myService, function(dlg) { 
     dialog.preformTheAction(someDiv); 
    }); 
} 

// Service 
preformTheAction = function(someDiv) { 
    $('#' + someDiv).html(new Date()); 
}