javascript - Angular 2 - 5 秒后自动关闭模态框

Question

我有一个表单模式，在提交时，它会将表单更改为一些成功的措辞。

我所追求的是当显示成功字样时模式会自动关闭(甚至会因花哨而淡出)，但我不知道该怎么做。

代码如下

模态 HTML(骨架)

<form>
    <md-toolbar>
        <div>Section Header</div>
        <span style="flex: auto;"></span>
        <button *ngIf="initial" md-icon-button (click)="functionCall()">
            <md-icon>save</md-icon>
        </button>
        <button md-icon-button md-dialog-close>
            <md-icon>close</md-icon>
        </button>
    </md-toolbar>
    <md-dialog-content>
        <md-input-container [hidden]="!initial">
            <input mdInput placeholder="Enter text" [(ngModel)]="fieldModel">
        </md-input-container>
        <p [hidden]="initial">Success.</p>
    </md-dialog-content>
</form>

模态组件(骨架)

export class TestComponent implements OnInit {
    fieldModel: string;
    initial = true;

    constructor() {}
    functionCall() {
        this.serviceCall.serviceName(this.fieldModel)
            .subscribe(data => {
                //On Success
                this.initial = false;
            }
    }
}

Answer 1

一种方法是利用 RxJS 方法:

this.serviceCall.serviceName(this.fieldModel)
  .do(() => this.initial = false)
  .delay(5000)
  .subscribe(() => this.initial = true);

服务调用完成后，这会将 initial 标志设置为 false，wait five seconds ，然后将其设置回 true。

如果您想要淡入淡出，一个简单的选择是使用 CSS 类通过过渡设置不透明度。或者，查看 Angular 的内置动画支持。