javascript - HTTP POST 到 Web API 后的 Angular 2+ 确认页面

Question

这里的第一个问题...我的任务是增强 Angular 应用程序，但我一开始就没有 Angular 经验。我确实有 javascript 经验，但通常坚持使用 Java(JSP，是的，还有 javascript)。考虑到我认为我做得相当不错，但我遇到了这个问题:

提交到 Web API 时，一切正常!但现在有了增强功能，添加一个页面，其中包含大量静态文本和信息，除了一两个项目，包括确认号(重要部分)。此页面必须替换提交数据的模板/页面，因为这是用户应该看到的最后内容。

我可以返回确认号并将其显示在提交的页面上，但这不是任务。我需要用新页面替换该页面。

由于应用程序以前的架构，我们没有使用路由，而是使用“步骤”......使用 mdl-stepper 库。

我曾想过简单地将其作为流程中的另一个步骤，但不想在发布可能失败时进入“成功”页面/显示。

简单地输入这个内容给了我一些额外的想法，但如果有人有一个真正简单的方法来做到这一点，我将不胜感激。

提前致谢。

以下是对实际发布帖子的方法的调用:

  this.http.postQuestionnaireForm(this.customerIntake)
  .subscribe(
    data => this.response = JSON.stringify(data),
    error => alert(error),
    () => console.log("Finished")
  );

这是上面方法调用的方法:

  postQuestionnaireForm(customerIntake: String) {
    let body = JSON.stringify(customerIntake);
    let headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers, method: "post" });

    return this.http.post(this.serviceUrl, body, options)
      .map(res => res.json());
  }

再次感谢!

Answer 1

事实是这个问题是多余的，你无法解决它的原因是你不懂语言，但我无论如何都会回答它，因为它可以帮助更多的人理解我的两种方法将解释。

据我了解，在以下情况下您希望在一个页面上仅更改 View :

1. 您发送 HTTP 请求并从 Web API 端点接收数据。
2. 您想要将页面的当前 View 更改为一些新文本，并将来自 Web API 的数据注入(inject)到 View 中的特定字段。

<小时/>

根据我使用 Angular 的经验，我将建议两种方法来完成这项工作。第一种方法会有点难看，但第二种方法会更优雅，但需要做更多的工作。 (以及一些高级 Angular 工具)

第一种方法

这种方法非常简单(但不是那么优雅)，您将所有代码放入 HTML 和 TS 文件中。我们将使用 *ngIf 来切换 View 。我将尝试编写尽可能接近您的代码的代码。我将创建名为“response”的变量，它将为 null，一旦我们从 Web API 收到数据，我们会将数据分配给变量“response”，让我们看一些示例。

typescript :

export class AppComponent {
  //#region Members
  public response: any;
  //#endregion

  //#region Constructor
  public constructor() {
    this.response = null;
  }
  //#endregion

  //#region Public Methods
  public postQuestionnaireForm(customerIntake) {
    console.log('postQuestionnaireForm(customerIntake)', customerIntake);

    this.http.postQuestionnaireForm(customerIntake)
      .subscribe(
        data => this.response = JSON.stringify(data),
        error => alert(error),
        () => console.log('Finished')
      );
  }
  //#endregion
}

HTML:

<div *ngIf="response === null">
  <!-- This section will contain the required fields for HTTP Call. -->
  <form>
    <!-- More inputs here -->
  </form>
</div>

<div *ngIf="response !== null">
  <!-- This section contains the static data -->
  Some data, static data
  Some data, static data
  Some data, static data
  Some data, static data
  {{ data }}
  Some data, static data
  Some data, static data
</div>

通过使用函数“postQuestionnaireForm()”，当数据从 Web API 返回时，响应变量将发生变化，DOM 将做出相应的响应。

<小时/>

第二种方法

在这种方法中，我们将创建 3 个组件。

1. 父组件，名称:AppComponent。
2. Child1 组件，名称:FormComponent。
3. Child2 组件，名称:DataComponent。

应用组件

typescript :

export class AppComponent {
  //#region Members
  public state: number;
  @ViewChild(DataComponent) dataComponent: DataComponent;
  //#endregion

  //#region Constructor
  public constructor() {
    this.state = 1;
  }
  //#endregion

  //#region Public Methods
  public emitterFunction(data) {
    this.state = 2;
    this.dataComponent.setData(data);
  }
  //#endregion
}

HTML:

<div [hidden]="state !== 1">
  <app-form (emitte)="emitterFunction($event)"></app-form>
</div>

<div [hidden]="state !== 2">
  <app-data></app-data>
</div>

表单组件

typescript :

export class FormComponent {
  //#region Members
  @Output() emitter: EventEmitter<any> = new EventEmitter();
  //#endregion

  //#region Constructor
  constructor() { }
  //#endregion

  //#region Public Methods
  public postQuestionnaireForm(customerIntake) {
    console.log('postQuestionnaireForm(customerIntake)', customerIntake);

    this.http.postQuestionnaireForm(customerIntake)
      .subscribe(
        data => this.emitter.emit(JSON.stringify(data))
        error => alert(error),
        () => console.log('Finished')
      );
  }
  //#endregion
}

HTML:

<form>
  <!-- More inputs here -->
  inputs
</form>

数据组件

typescript :

export class DataComponent {
  //#region Members
  public data: any;
  //#endregion

  //#region Constructor
  constructor() {
    this.data = null;
  }
  //#endregion

  //#region Public Methods
  public setData(data: any): void {
    this.data = data;
  }
  //#endregion
}

HTML:

<div>
Some data, static data
Some data, static data
Some data, static data
Some data, static data
{{ data }}
Some data, static data
Some data, static data
</div>

<小时/>

值得一提的是，我们将 View 划分为两个可以独立运行的独立组件。通过这种分离，它更容易维护，更容易理解，但对于 Angular 框架的初学者来说更复杂。

一些需要解释的事情:

• @ViewChild - 通过这个我们可以获取对子组件的引用，我们使用它来获取对 DataComponent 的引用，这样我们就可以从 FormComponent 传递数据。
• EventEmitter - 它是向父组件抛出数据的类，您可以看到我们在 FormComponent 中添加了它，并在 HTTP 请求完成时调用它。在 AppComponent HTML 中，我们添加了对函数的引用，当发射器被激活时，它将在这个特定函数中将数据从子组件传递到父组件，然后我们获取数据并将其传递给 DataComponent。
• [hidden] - 我使用这个是因为重要的原因，我想使用 *ngIf，但是有一个问题，使用 *ngIf 时 HTML 甚至不存在，因此一开始 HTML“” 不存在甚至存在。当我们使用 [hidden] 时，HTML 存在但它是隐藏的，因此我们可以引用 DataComponent 并且可以使用“setData(data)”函数。