如何在 Angular 应用程序中发出 POST 请求？答案

【问题标题】：How to make a POST request in an Angular app?如何在 Angular 应用程序中发出 POST 请求？
【发布时间】：2019-03-13 10:57:47
【问题描述】：

有一个 Angular 应用程序，这个应用程序是一个弹出窗口，在单击另一个应用程序时打开。（这个另一个应用程序构造了一个 URL (abc.com/sensitive 1/sensitive 2/sensitive 3 /sensitive 4)），这个应用程序在路由器中调用它并检查敏感数据是否存在。

const routes: Routes = [
  {
    path: 'main/:sensitive1/:sensitive2/:sensitive3/:sensitive4',
    component: MainComponent,
    resolve: { sensitive1: sensitive1DetailsResolve, sensitive2: sensitive2ServiceResolve }
  },

Index.html
<body>
<div id="page-wrapper">
  <abc-root></abc-root>
</div>
</body>

在该用户从另一个应用程序单击我的应用程序的链接后，我的应用程序会弹出其中包含所有敏感数据。因此，想要对 URL 进行 POST 请求（abc.com/sensitive 1/sensitive 2/sensitive 3 /敏感 4)

对 Angular 的了解非常有限，现在的问题是我的 Angular 应用程序应该能够使用 post 方法来隐藏所有敏感数据，并且还应该能够处理浏览器刷新。

请帮助处理这种情况。非常感谢任何帮助。

【问题讨论】：

现在您的问题非常非常广泛。我建议您阅读一些 Angular 教程，以熟悉该框架的工作原理并返回您所面临的具体问题。
我已经阅读了一些教程，并且对如何以角度实现 http 请求有所了解。但不适用于上述特定场景:( .
到现在为止你尝试过什么？

标签： html angular post

【解决方案1】：

下面的工作现在....

const appRoutes: Routes = [
  { path: 'sensitive1', component: MainComponent },
  { path: 'sensitive1',      component: sensitive1DetailsResolve}
  { path: 'sensitive2',      component: sensitive2DetailsResolve},
  {
    path: 'sensitive1',
    component: sensitive1DetailsComponent,
    data: { title: 'sensitiveData' }
  },
  { path: '',
    redirectTo: 'main',
    pathMatch: 'full'
  },
  { path: '**', component: PageNotFoundComponent }
];

【讨论】：

【解决方案2】：

在 app.module.ts 中导入 HttpClientModule

import { HttpClientModule } from '@angular/common/http';

@NgModule({

  imports: [
    BrowserModule,
    // import HttpClientModule after BrowserModule.
    HttpClientModule,
   ],

还有

将HttpClient 导入到您要发出post请求的文件中（通常在service.ts中）

import { HttpClient } from '@angular/common/http';

在构造函数中为 HttpClient 初始化对象

constructor(private http: HttpClient) { }

现在对下面的 url 进行 post 请求，数据将是参数

this.http.post(url, data);

【讨论】：