Angular 角2的警报服务

下面是我如何在教程应用程序中实现警报服务，但它不起作用。请问有什么问题？登录页面和注册页面上的警报消息均无效

登录组件

注册页

警报服务

alert.html

---

我没有检查代码的逻辑，但有一点很明显，我没有看到您提供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; });
            }
        }

---

我没有检查代码的逻辑，但有一点很明显，我没有看到您提供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; });
            }
        }

---

您需要像这样添加到app.component.html中

---

您需要像这样在app.component.html中添加

---

好的，那么你能和我们分享一下你打开浏览器控制台时遇到的错误吗？好的，那么你能和我们分享一下你打开浏览器控制台时遇到的错误吗？你好，阿基夫，和我一样，但仍然不起作用。subject.next不启动ngonint..所以警报不更新。如果我想在登录htmlm中的登录按钮下显示太多，那么@Akiv怎么办？你好，Akiv，我也这么做了，但是仍然不起作用。subject.next不启动ngonint..所以警报不更新。如果我想在登录htmlm的登录按钮下显示太多，那么@Akiv怎么办？

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

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

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

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