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

Angular2对话回调

1 个答案: