小编Chr*_*nus的帖子

我目前正在尝试让 Angular 应用程序在用户尝试离开我的页面时进行 API 服务调用。通过关闭选项卡/窗口，或输入外部 URL。

我已经尝试实现几种不同的方法，我在这里看到的关于计算器溢出问题的描述，但似乎都没有达到预期的效果。有些人提到了同步 ajax 请求，这些请求已经或正在被 Chrome 上的 onbeforeunload 弃用。其他人建议使用 XMLHttpRequests，它们似乎遭受了同样的命运。我曾尝试@HostListener('window:onbeforeunload', ['$event'])在 HTML 中使用 , 和等价物(window:beforeunload)="doBeforeUnload($event)"，但都拒绝合作。我可以让 console.logs 显示出来，但 API 永远不会收到任何注销用户的调用。我也使用过navigator.sendBeacon，尽管它的函数返回 true，表明作业已发送到浏览器队列，但什么也没有实现。

目前，注销功能是这样的：

userLogout(): Observable<any> {
    return this.apiService.get('/Account/Logout/');
  }

反过来，它是一个通用的 http get 函数：

get<T>(url: string, options?: { params: HttpParams }): Observable<any> {
    return this.httpRequest<T>('get', url, null, options ? options.params : null);
  }

使用 HttpInterceptor 添加完整 url。注销功能本身正在工作，因为它用于菜单选项，手动使用时按预期工作。所以函数应该不是问题。

我试图做的就是以同步或异步方式调用 userLogout 函数，并通知后端用户已离开。

我目前正在尝试实现以下行为的更复杂版本，但由于我要到星期一才能访问我的项目，因此我将使用 Angular Material 教程中的更改示例进行简化。

Angular Material 表中填充了来自字符串数组的数据。数据显示在第一列的输入字段中。每行的第二列是一组按钮，当按下这些按钮时，会更改其行输入的内容。

我试图通过使用模板引用变量来识别输入元素，但它总是显示为未定义。所以我假设 Angular Material 的表在我背后做一些改变所述变量范围的事情。

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

    <ng-container matColumnDef="inputColumn">
        <th mat-header-cell *matHeaderCellDef> No. </th>
        <td mat-cell *matCellDef="let element">
            <input #inputRef placeholder="{{element.name}}">
        </td>
    </ng-container>

    <ng-container matColumnDef="buttonColumn">
        <th mat-header-cell *matHeaderCellDef> Name </th>
        <td mat-cell *matCellDef="let element">
            <button (click)="inputRef.value='Changed Element'">Change!</button>
        </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

在我的实际项目中，数据将来自 API，还会有更多按钮用于启用输入、保存或放弃对其内容所做的更改等。但是如果我设法让这个例子工作，那么剩下的应该很简单。

任何帮助将不胜感激。