角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，等五秒钟，然后将其设置为true。

如果您想要淡出，一个简单的选择是使用CSS类来设置具有转换的不透明度。或者，查看角的内置动画支持。