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

Angular 2 - 5 秒后自动关闭模式

Angular 2 - Auto Close Modal After 5 Seconds

javascript

angular2-forms

angular2-template