Question

我无法理解在哪里编写我的css loader / spinner代码，我也无法使用Jquery是ts语言。那么如何在angularJS 2页面（已加载）的特定div元素中显示微调器。

示例 - 在页面或特定div元素上显示微调器，直到没有收到http get数据???

请给您专家意见和推荐链接，以帮助解决这个问题。

Answer 1

我使用shareservice概念实现了这个全局微调器。简而言之，我为旋转器提供了一项服务，可以随时随地使用。看看这里已经给出了答案

How to make a preloader with Angular2
注意：这是使用角度beta版本。

service.ts

import {Component, Injectable} from 'angular2/core'

export interface ILoader {
   isLoading:boolean=false;
}

@Injectable()
export class sharedService { 
  loader:ILoader={isLoading:false}; 
  showLoader()
  {
    console.log('showloader started');
    this.loader.isLoading=true;
  }
  hideLoader()
  {
    this.loader.isLoading=false;
  }
}

无论您使用的是专利子组件，路由还是组件之间没有关系，我猜这都很有用。

Answer 2

我为Show＆amp; amp;创建了一些函数。隐藏页面级别加载器和显示和隐藏加载器面板/ div容器级别...直接操作html ....

这是我的代码

loading = document.createElement('div');
img = document.createElement('img');
constructor() {

    this.img.src = 'app/template/img/loading.gif';
    this.loading.id = 'loading';
    this.loading.appendChild(this.img);
  }

 showPageLoader() {
    document.body.appendChild(this.loading);
  }
  hidePageLoader() {
    document.getElementById('loading').remove();
  }

  showLoader(panelID: string) {
    document.getElementById(panelID).innerHTML += '<div class="loader-text">\
                                                      <div class="text">Loading data\
                                                          <span>\
                                                              <div class="dot dot1"></div>\
                                                              <div class="dot dot2"></div>\
                                                              <div class="dot dot3"></div>\
                                                              <div class="dot dot4"></div>\
                                                          </span>\
                                                      </div>\
                                                  </div>';
    document.getElementById(panelID).className += ' loaded';
  }

  hideLoader(panelID: string) {
    document.getElementById(panelID).className = document.getElementById(panelID).className.replace(' loaded', '');
    $('#' + panelID + '> div.loader-text').html('');
    $('#' + panelID + '> div.loader-text').remove();    
  }

现在我只需要使用该服务来显示和隐藏页面上的加载器或特定的div-panel ... Thanx micronyks的提示

我如何使用ts或HTML在angualrjs 2中显示css / js微调器

2 个答案: