angular6 - 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>

标签： angular6

Answer 1

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

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

showMsg: boolean = false;

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

然后你可以使用 showMsg boolean 来显示/隐藏潜水，如下所示

<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>

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

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