Angular2对话框回调

Question

全部，我有一个Angular2应用程序。 在此应用程序中，我有一个打开对话框的按钮。 在此对话框中，我需要操作一个div。 对话框及其所有子级创建之后，是否可以在回调中执行代码？

我最近的是

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

如果我采用这种方法，那么如果用户单击该div内的表单字段，则会重新执行我的代码。

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

在上面的示例中，如果没有（focusin），则无法获得“ thisDivRightHere”的句柄

但是，如果我使用（focusin），则每次进行交互时，日期都会更改。

Answer 1

我通过使用setTimeout等待元素和精心放置的回调来解决它

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