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>

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 bool 值来显示/隐藏潜水，如下所示

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

这将在提交时产生如下内容:

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