angularjs 6消息提交成功

Question

提交时如何在我的函数中发送一条消息，其中包含“操作成功”？

  onSubmit() {
    this.userService.createUser(this.addForm.value)
      .subscribe( data => {
        this.router.navigate(['list-user']);
      });
  }

我更愿意在空的段落中添加html内容。

<div class="col-md-6">
  <form [formGroup]="addForm" (ngSubmit)="onSubmit()">

    <p class="msg_success"></p>

    <button class="btn btn-success">Add user</button>
  </form>
</div>

Answer 1

您可以像这样在组件中声明一个变量：

msg: string = null;

onSubmit() {
    this.userService.createUser(this.addForm.value)
      .subscribe( data => {
        this.router.navigate(['list-user']);
        this.msg = 'success';
      });
  }

然后您可以将msg变量绑定到模板中，如下所示：

<div class="col-md-6">
  <form [formGroup]="addForm" (ngSubmit)="onSubmit()">

    <p class="msg_success">{{ msg }}</p>

    <button class="btn btn-success">Add user</button>
  </form>
</div>

Answer 2

使用字符串插值（{{...}}）不会使您对要显示的html产生太多控制，

如果要显示更多内容，则可以利用 * ngIf ，然后仅显示如下所示的简单字符串：

showMsg: boolean = false;

onSubmit() {
    this.userService.createUser(this.addForm.value)
      .subscribe( data => {
        this.router.navigate(['list-user']);
        this.showMsg= true;
      });
  }

然后您可以使用showMsg布尔值来显示/隐藏潜水，如下所示

<div class="col-md-6">
  <form [formGroup]="addForm" (ngSubmit)="onSubmit()">

   <div class="row"  *ngIf="showMsg">
        <div class="col-xs-12">
          <p class="alert alert-success">
              <strong>Registration Success!</strong> Please click here to login!.

          </p>
        </div>
      </div>

    <button class="btn btn-success">Add user</button>
  </form>
</div>

这将导致如下所示的提交：

请注意，我正在使用一些引导程序类进行样式设计。