第一种方法

Question

这里的第一个问题...我的任务是增强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

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

据我了解，您希望在一页上仅在以下情况下更改视图：

您发送HTTP请求并从Web API端点接收数据。
您想要将页面的当前视图更改为一些新文本，并将数据从Web API注入到视图中的特定字段。

根据我在Angular的经验，我将提出两种完成工作的方法。第一种方法会有点丑陋，但第二种方法会更优雅，但需要做更多的工作。（和一些高级Angular工具）

第一种方法

这种方法非常简单（但并不那么优雅），您可以将所有代码放入HTML和TS文件中。我们将使用* ngIf切换视图。我将尝试编写与您的代码尽可能接近的代码。我将创建一个名为“ 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个组件。

父组件，名称：AppComponent。
Child1组件，名称：FormComponent。
Child2组件，名称：DataComponent。

AppComponent

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>

FormComponent

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>

DataComponent

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>

重要的是要提到我们将视图分为两个可以独立起作用的独立组件。通过这种分离，它更易于维护，更易于理解，但对于Angular框架的初学者而言，则更为复杂。

一些要解释的东西：

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

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

1 个答案:

第一种方法

第二种方法

AppComponent

FormComponent

DataComponent