Angular 异步 - 如何获取异步方法的字符串

Question

我使用此服务类来获取网络状态：

@Injectable()
export class NetworkConnectionService { 

constructor() {
} 

addNetworkConnectionListener() {
      Network.addListener('networkStatusChange', status => {
        console.log('Network status changed', status);
    });
}

getCurrentNetworkStatus() {
    const self = this;
    const currentNetworkStatus = async () => {
        const status = await Network.getStatus();
    };
    return currentNetworkStatus;
 }
}

我想获取状态字符串以便在 html 中打印它。 我如何获得这个字符串？

Answer 1

您应该使您的

getCurrentNetworkStatus()

异步，因为

Network.getStatus()

是异步的（它返回一个 Promise）。另外，您应该坚持使用一个功能，而不是创建附加功能，附加功能不会带来任何价值。需要修复的另一件事是

await Network.getStatus();

返回一个对象，您需要访问它的

connectionType

属性。

async getCurrentNetworkStatus(): Promise<string> {
  const status = await Network.getStatus();
  return status.connectionType;
}

现在你有一个函数，它返回一个包含字符串的 Promise。在您的组件中，确保注入服务并且它是

public

，这样它就可以在模板中使用：

export class YourComponent {
  public networkConnectionService = inject(NetworkConnectionService);
}

最后一步：使用模板中的

async

管道从promise中解开字符串：

<p>
  Network status:
  {{ networkConnectionService.getCurrentNetworkStatus() | async }}
</p>