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的内置动画支持。

角度2 - 5秒后自动关闭模态

1 个答案: