Question

如何在角度2中实现块ui（）阻止用户交互？有人可以帮忙。

Answer 1

spinner.ts

SELECT StartTime
FROM RecordLog
WHERE StartTime >= '2016-03-11T18:00:00' AND
      StartTime < '2016-03-10T06:00:00'
ORDER BY id ASC;

spinner.css

private void Fill(string ViewStateName, string type1, string type2, string type3, 
              string type4, string type5, string type6, string type7, string val1, 
              string val2, string val3, string val4, string val5, string val6, 
              string val7, string VCol1, string VCol2, string VCol3, string VCol4, 
              string VCol5, string VCol6, string VCol7, GridView gv, DataTable table,
              DataTable tableMore, string Sessiontable, string SessiontableMore = "", 
              string SessionRestTable = "", string SessionEditTbl = "")
{
    //code
}

spinner.service.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...'
    };
}

将微调器服务注入组件。呼叫开始和停止显示和隐藏。

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

免责声明：我使用了一个现有的angular2库作为参考，在我的项目中创建了上面的代码。我正在搜索该库，并在找到它时将在此处更新。

Answer 2

Angular 2 blockui with spinner（可根据您的需要定制）

请在下面找到与angular 2完美配合的代码

<强> spinner.component.ts

import {Component, Input, OnDestroy} from '@angular/core';

@Component({
    selector: 'my-spinner',
    //templateUrl: 'app/components/spinner/spinner.html'
    template: `
    <div [hidden]="!isDelayedRunning" class="spinnercontainer">
        <div class="spinner">  
            <div class="double-bounce1"></div>
            <div class="double-bounce2"></div>
        </div>
    </div>  
    `,
    styleUrls:['app/spinner.component.css']
})
export class SpinnerComponent implements OnDestroy {  
    private currentTimeout: any;
    private isDelayedRunning: boolean = false;

    @Input()
    public delay: number = 300;

    @Input()
    public set isRunning(value: boolean) {
        if (!value) {
            this.cancelTimeout();
            this.isDelayedRunning = false;
        }

        if (this.currentTimeout) {
            return;
        }

        this.currentTimeout = setTimeout(() => {
            this.isDelayedRunning = value;
            this.cancelTimeout();
        }, this.delay);
    }

    private cancelTimeout(): void {
        clearTimeout(this.currentTimeout);
        this.currentTimeout = undefined;
    }

    ngOnDestroy(): any {
        this.cancelTimeout();
    }
}

<强> spinner.component.css

.spinnercontainer{
    background-color: transparant;
    height: 100vh;
    width: 100%;
    z-index: 20000;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #000;
    opacity: 0.5;
    transition: all 0.5s ease;
    display:block;
    z-index: 20001;
}
.spinner {
  width: 40px;
  height: 40px;
  position: relative;
  margin: 100px auto;
}

.double-bounce1, .double-bounce2 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #333;
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;

  -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
  animation: sk-bounce 2.0s infinite ease-in-out;
}

.double-bounce2 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

@-webkit-keyframes sk-bounce {
  0%, 100% { -webkit-transform: scale(0.0) }
  50% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bounce {
  0%, 100% {
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 50% {
      transform: scale(1.0);
      -webkit-transform: scale(1.0);
    }
}

如何使用 在其他组件（使用异步任务）中使用上面的组件，如下所示

<强>样品view.component.ts

import {Component} from '@angular/core';

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

@Component({
    selector: 'my-sample-view',
    directives: [SpinnerComponent],
    template: '<my-spinner [isRunning]="isRequesting"></my-spinner>',
})
export class SampleViewComponent {  
    public isRequesting: boolean;
    public items: Array<any>;

    constructor(private apiService: ApiService) {
        this.refresh();
    }

    public refresh(): void {
        this.isRequesting = true;
        this.apiService.sampleHttpGetRequest()
            .subscribe(
                result => this.items = result, 
                () => this.stopRefreshing(),
                () => this.stopRefreshing());
    }

    private stopRefreshing() {
        this.isRequesting = false;
    }
}

感谢https://manuel-rauber.com/2016/01/05/angular-2-spinner-component/

Answer 3

修改上一个答案，并更新Angular 2 RC1。

blockUi.ts（注意你需要一些软的spinner.gif）

import { Component, Input } from '@angular/core';

@Component({
    selector: 'blockUi',
    template:
    `<div class="in modal-backdrop block-ui-overlay"></div>
     <div class="block-ui-message-container" aria-live="assertive" aria-atomic="true">
        <div class="block-ui-message">
            <table>
                <tr><td class='center space'>{{ message }}</td></tr>
                <tr><td class='center'><img src="/styles/img/spinner.gif" /></td></tr>
            </table>
        </div>        
    </div>`,
    styles: [`
.block-ui-overlay {
  background-color: white;
  cursor: wait;
}
.block-ui-message-container {
  position: absolute;
  top: 35%;
  left: 0;
  right: 0;
  height: 0;
  text-align: center;
  z-index: 10001;
  cursor: wait;
}
.block-ui-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);
}
.center {
  text-align: center;
}
.space {
  padding-bottom: 10px;
}`]
})
export class BlockUi {
    message: string = 'Please wait...';
}

blockUiService.ts

import { Injectable, Inject, DynamicComponentLoader, ApplicationRef, ViewContainerRef, ComponentRef } from '@angular/core';
import { BlockUi } from '../components/blockUi';    

@Injectable()
export class BlockUiService {

    blockUi: ComponentRef<BlockUi>;

    constructor(
        @Inject(DynamicComponentLoader) private dynamicComponentLoader: DynamicComponentLoader,
        @Inject(ApplicationRef) private applicationRef: ApplicationRef) { }

    start(message?: string) {

        const viewContainerRef: ViewContainerRef = this.applicationRef['_rootComponents'][0]._hostElement.component.viewContainerRef;

        return this.startInside(viewContainerRef, message);
    }

    startInside(viewContainerRef: ViewContainerRef, message?: string) {

        const blockUiRef = this.dynamicComponentLoader.loadNextToLocation(BlockUi, viewContainerRef);

        blockUiRef.then((compRef: ComponentRef<BlockUi>) => {
            this.blockUi = compRef;
            if (message !== undefined && message !== null && message.length > 0 ) {
                const blockUiInstance: BlockUi = compRef.instance;
                blockUiInstance.message = message;
            }
        });
    }

    stop() {
        if (this.blockUi) {
            this.blockUi.destroy();
        }
    }
}

用法

constructor(
    @Inject(BlockUiService) private blockUiService: BlockUiService
) {}

this.blockUiService.start("Saving Data...");

...

this.blockUiService.stop();

如何在角度2中实现阻止ui的行为

3 个答案: