angular - 如何在 Angular 2 中实现 block ui 类行为

Question

如何在 Angular 2 中实现 block ui( http://malsup.com/jquery/block/#demos) 类型的用户交互阻塞？有人可以帮忙吗。

Answer 1

微调器.ts

import {Component} from 'angular2/core';

@Component({
    selector: 'spinner',
    styleUrls: ['spinner.css'],
    //I'm using in modal-backdrop classes from bootstrap
    template:
    `<div class="in modal-backdrop spinner-overlay"></div>
     <div class="spinner-message-container" aria-live="assertive" aria-atomic="true">
        <div class="spinner-message" [ngClass]="spinnerMessageClass">{{ state.message }}</div>
    </div>`
})
export class SpinnerComponent {
    state = {
        message: 'Please wait...'
    };
}

微调器.css

.spinner-overlay {
  background-color: white;
  cursor: wait;
}

.spinner-message-container {
  position: absolute;
  top: 35%;
  left: 0;
  right: 0;
  height: 0;
  text-align: center;
  z-index: 10001;
  cursor: wait;
}

.spinner-message {
  display: inline-block;
  text-align: left;
  background-color: #333;
  color: #f5f5f5;
  padding: 20px;
  border-radius: 4px;
  font-size: 20px;
  font-weight: bold;
  filter: alpha(opacity=100);
}

微调器服务.ts

import {Injectable, DynamicComponentLoader, ApplicationRef, ElementRef, ComponentRef} from 'angular2/core';

import {SpinnerComponent} from './spinner.component';

@Injectable()
export class SpinnerService {
    spinnerComp: ComponentRef;
    constructor(private componentLoader: DynamicComponentLoader, private appRef: ApplicationRef) { }

    public start() {
        let elementRef: ElementRef = this.appRef['_rootComponents'][0].location;

        return this.startInside(elementRef, null);
    }

    public startInside(elementRef: ElementRef, anchorName: string) {

        let spinnerRef = (!anchorName) ?
                            this.componentLoader.loadNextToLocation(SpinnerComponent, elementRef) :
                            this.componentLoader.loadIntoLocation(SpinnerComponent, elementRef, anchorName);

        spinnerRef.then((compRef:ComponentRef) => {
            this.spinnerComp = compRef;
        });
    }

    public stop() {
        if (this.spinnerComp) {
            this.spinnerComp.dispose();
        }
    }
}

将旋转器服务注入(inject)您的组件。调用start和stop来显示和隐藏。

更新:演示plnkr链接:http://plnkr.co/edit/Y2ocRpbi2ORjbULrguDg

免责声明:我使用一个现有的 angular2 库作为引用，在我的项目中创建上述代码。我正在搜索该库，找到后会在此处进行更新。