Как показать счетчик в угловых 6 - PullRequest
Новая
       6

Как показать счетчик в угловых 6

0 голосов
/ 23 июня 2018

Я новичок в угловой разработке и веб-разработке, но могу проектировать различные веб-страницы и получать данные с сервера с помощью клиентского модуля HTTP.

При получении данных с сервера я хочу показать счетчик прогресса, но я не могу это сделать. Я искал в Google, но ничто не заставило меня сделать это. Пожалуйста, помогите мне достичь этого.

Код:

login.component.ts 

 userLogin() {
        console.log('logging in');
        this.eService.signIn(this.user_name, this.password)
        .subscribe(
            data => {
                console.log(data);
               this.admin = data;
               if ( this.admin.firstLogin === true) {
                   // go to update admin password
               } else {
                this.router.navigate(['/dashboard']);
                }
               localStorage.setItem('isLoggedin', 'true');
             }
        );
    }

login.html 

<div class="login-page" [@routerTransition]>
    <div class="row justify-content-md-center">
        <div class="col-md-4">
            <img src="assets/images/logo.png" width="150px" class="user-avatar" />
            <h1>Users/h1>
            <form role="form">
                <div class="form-content">
                    <div class="form-group">
                        <input type="text" name="username" [(ngModel)]="user_name" class="form-control input-underline input-lg" id="" placeholder="username">
                    </div>

                    <div class="form-group">
                        <input type="password" name="password" [(ngModel)]="password" (keyup.enter)="userLogin()" class="form-control input-underline input-lg" id="" placeholder="password">
                    </div>
                </div>
                <a class="btn rounded-btn" (click)="userLogin()"> Log in </a>
                &nbsp;
                <a class="btn rounded-btn" >Clear</a>
            </form>
        </div>
    </div>
</div>

Поэтому, когда я запрашиваю услугу входа в систему, я хочу показать счетчик. Пожалуйста, помогите мне, как я могу это сделать?

Я знаю, что для многих разработчиков это просто, но для меня это становится довольно сложно.

Ответы [ 2 ]

0 голосов
/ 23 июня 2018

Вы можете использовать ng4-loading-spinner

Выполнить npm i ng4-loading-spinner --save

Импортировать модуль в корневой модуль вашего приложения 

import { Ng4LoadingSpinnerModule } from 'ng4-loading-spinner';

Выполнить импортзапись 

 imports: [ Ng4LoadingSpinnerModule.forRoot() ]

Включение компонента счетчика в компонент корневого уровня. 

<ng4-loading-spinner> </ng4-loading-spinner>

использование show() и hide() внутри subscribe обратный вызов 

import { Ng4LoadingSpinnerService } from 'ng4-loading-spinner';
 constructor(
        private spinnerService: Ng4LoadingSpinnerService
    ) { }
    userLogin() {

        this.spinnerService.show();
            console.log('logging in');
            this.eService.signIn(this.user_name, this.password)
            .subscribe(
                data => {
                    console.log(data);
                   this.admin = data;
                   if ( this.admin.firstLogin === true) {
                       // go to update admin password
                   } else {
                    this.router.navigate(['/dashboard']);
                    }
                   localStorage.setItem('isLoggedin', 'true');
                 },
               ()=>this.spinnerService.hide();
            );
        }

Live Demo

0 голосов
/ 23 июня 2018

Добавьте спиннер в ваш HTML-код, например, так: 

<img *ngIf="loading" src="assets/my-spinner.gif" /> <!-- Or use a CSS one if you like -->

Затем в вашем Typescript вам нужно создать переменную с именем loading и установить ее так: 

userLogin() {
    console.log('logging in');
    this.loading = true; // Add this line
    this.eService.signIn(this.user_name, this.password)
    .subscribe(
        data => {
            console.log(data);
           this.loading = false; // And this one
           this.admin = data;
           if ( this.admin.firstLogin === true) {
               // go to update admin password
           } else {
            this.router.navigate(['/dashboard']);
            }
           localStorage.setItem('isLoggedin', 'true');
         }
    );
}

Это установит для loading значение true, пока служба работает

...