如何在角度2中实现块ui类型的行为

Question

怎样才能实现在角度2中阻塞用户交互的块UI（http://malsup.com/jquery/block/#demos）？有人可以请帮忙。

Answer 1

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

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

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

进样微调服务。调用开始和停止来显示和隐藏。

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

免责声明：我已经使用一个现有angular2库作为参考上面创建在我的项目代码。我正在寻找该图书馆，并在我找到该图书馆时在此处进行更新。

Answer 2

修改以前的答案，并更新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(); 

Answer 3

角2 blockui与微调（可根据您的需求定制）

请在下面找到与角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/