Question

我正在使用EventEmitter并且需要知道promise什么时候完成，所以我可以执行其他操作。

// child.component.ts

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>-</title>
</head>

<body>

<?php
// Database ---------------------------------------------------------
$servername = "-";
$username = "-";
$password = "-";
$dbname = "-";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error)
    {
    die("Connection failed: " . $conn->connect_error);
    }
// Database ---------------------------------------------------------

$arr = explode("\n", $_POST['textareaname']);

echo "<table>

<tr><th><b><u>ID</u></b></th><th><b><u>Item</u></b></th><th><b><u>Place</b></u></th></tr>";

foreach ($arr as $value) 
        {
    $sql = "SELECT * FROM database1 WHERE id=$value";
    $res = $conn->query($sql);

    while($row=$res->fetch_assoc())
        {
        echo "<tr><td>".$row["id"]."</td><td>".$row["item"]."&nbsp;&nbsp;&nbsp;</td><td>".$row["place"]."</td>"; 
        }
        }
echo "</table>";
$conn->close();
?>
</body>
</html>

// child.component.html

...
class ChildComponent{
    @Output onDoSomething() = new EventEmitter();

    constructor(){}

    public async doThis(){
        await this.onDoSomething.emit(); <---- how do I know when this completes?
        doSomeOtherThings();
    }
}

// parent.component.html

...
<div (click)="doThis()"></div>

// parent.component.ts

<child-component (onDoSomething)="doSomething()"></child-component>

Answer 1

我对您的目标的理解是，父组件将对子组件中任务的完成做出反应。

如果是这种情况，那么子组件的方法可以更改为：

public async doThis(){
    await doSomeOtherThings();
    this.onDoSomething.emit();
}

声明＆＃39; this.onDoSomething.emit（）;＆＃39;将通知父控件该任务已完成。

然后，父组件将调用事件处理程序：doSomething（）。

Answer 2

我相信你正试图在子组件和父组件之间进行双向通信。我更喜欢使用服务。

如果我的理解是正确的，您的用例就是这样：

子组件：单击doThis（） - ＆gt;通知父组件（this.onDoSomething.emit（））
父组件监听子事件并执行doSomething（），它返回一个promise / notification / data？
子组件需要使用返回的promise / data并执行其他一些函数

我基本上会创建父母和孩子共享的服务。我们称之为DoSomethingService.ts

import { BehaviorSubject } from 'rxjs/BehaviorSubject';

@Injectable()
export class DoSomethingService { 
      public doSomething: BehaviorSubject<YourData> = new BehaviorSubject<YourData>(null);
     //note YourData is your custom data that you want to pass to child component

}

在您的parentComponent上：

class ParentComponent{

    constructor(private service: DoSomethingService){}

    public doSomething(){
         let yourData = Promise.all([
             Promise1, 
             Promise2, 
             Promise3
         ]); // Or anything that you want to pass to child component

    this.service.doSomething.next(yourData);

    }
}

您的孩子组成部分：

class ChildComponent{
    @Output onDoSomething() = new EventEmitter();

    constructor(private service: DoSomethingService){
      this.service.doSomething.subscribe(data => {
      if (data) {
         //This will fire after the parent has executed DoSomething()
        //do something with this data from parent
      }
    })

    }

    public async doThis(){
        this.onDoSomething.emit(); 
        doSomeOtherThings();
    }
}

如果需要，您可以进一步扩展此服务以进行所有通信，无需使用@output。

希望这有帮助。

angular - 如何使用EventEmitter知道promise何时完成

2 个答案: