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

我没有检查代码的逻辑，但一个显而易见的事情是我没有看到你提供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; });
            }
        }

Answer 2

您需要像这样添加app.component.html <div class="col-sm-8 col-sm-offset-2"> <alert></alert> <router-outlet></router-outlet> </div>

角度为2的提醒服务

2 个答案: