角度2警報服務

Question

以下是我如何在我的教程應用程序中實現警報服務，但它不起作用。請問有什麼問題？登錄頁面和註冊頁面上的警報消息都沒有工作

登錄組件

login(){ 
    this.authenticateLoginService.login(this.login.email, this.login.password) 
     .subscribe(data => { 
      this.redirectToLoginPage(); 
     }, 
     error => { 
      this.alertService.error('Invalid Username or Password'); 
      this.loading = false; 
     }); 
} 

註冊頁面

Register(){ 
    this.httpService.createUser(this.module) 
     .subscribe(data => { 
     this.alertService.success('Registration Successful', true); 
     this.redirectToLoginPage() 
     console.log(data); 
     }, 
     error =>{ 
     this.alertService.error(error); 
     }); 
} 

提醒服務

import { Injectable } from '@angular/core'; 
import { Router, NavigationStart } from '@angular/router'; 
import { Observable } from 'rxjs'; 
import { Subject } from 'rxjs/Subject'; 

@Injectable() 
export class AlertService { 
    private subject = new Subject<any>(); 
    private keepAfterNavigationChange = false; 

    constructor(private router: Router) { 
     // clear alert message on route change 
     router.events.subscribe(event => { 
     if (event instanceof NavigationStart) { 
      if (this.keepAfterNavigationChange) { 
       // only keep for a single location change 
       this.keepAfterNavigationChange = false; 
      } else { 
       // clear alert 
       this.subject.next(); 
      } 
     } 
    }); 
    } 

    success(message: string, keepAfterNavigationChange = false) { 
     this.keepAfterNavigationChange = keepAfterNavigationChange; 
     this.subject.next({ type: 'success', text: message }); 
    } 

    error(message: string, keepAfterNavigationChange = false) { 
     this.keepAfterNavigationChange = keepAfterNavigationChange; 
     this.subject.next({ type: 'error', text: message }); 
    } 

    getMessage(): Observable<any> { 
     return this.subject.asObservable(); 
    } 
} 

個

alert.ts

import { Component, OnInit } from '@angular/core'; 
import { AlertService } from '../Services/alert_services'; 

@Component({ 
    selector: 'alert', 
    templateUrl: 'alert.html' 
}) 

export class AlertComponent { 
    message: any; 

    constructor(private alertService: AlertService) { } 

    ngOnInit() { 
     this.alertService.getMessage().subscribe(message => { this.message = message; }); 
    } 
} 

alert.html

<div *ngIf="message" [ngClass]="{ 'alert': message, 'alert-success': message.type === 'success', 'alert-danger': message.type === 'error' }">{{message.text}}</div> 

Answer 1

您需要在您的app.component.html添加這樣 <div class="col-sm-8 col-sm-offset-2"> <alert></alert> <router-outlet></router-outlet> </div>

Answer 2

我沒有檢查你的代碼的邏輯，但一個明顯的事情是，我沒有看到你提供AlertService。 因此，您可以選擇在AppModule中或使用該服務的每個組件中提供。例如：

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

      import { AlertService } from '../Services/alert_services'; 

      @Component({ 
       selector: 'alert', 
       templateUrl: 'alert.html', 
       providers: [AlertService], //add this line 
      }) 

      export class AlertComponent 

      { 
      message: any; 

      constructor(private alertService: AlertService) { } 

      ngOnInit() { 
       this.alertService.getMessage().subscribe(message => {   this.message = message; }); 
      } 
     }