Angular(11) - 使用消息通知 - 官方教程英雄指南之添加消息服务 （详细解说）

有了异步方法，我们希望有更好的用户体验，希望在获取数据的时候也可以让用户知道后台等待的状态。这样就有了今天的主题，消息通知。

1 创建消息组件

ng generate component messages

2 创建消息服务

ng generate service message

3 修改全局组件

src/app/app.component.html

<h1>{{title}}</h1>
<app-heroes></app-heroes>
<app-messages></app-messages>

4 修改消息服务类

• 设置私有变量 messages: string[] = []; 为字符数组
• add方法， 向现有的message中添加一条消息，并且存储到私有变量messages中
• clear方法， 清除所有消息

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class MessageService {
  messages: string[] = [];

  add(message: string) {
    this.messages.push(message);
  }

  clear() {
    this.messages = [];
  }
}

5 导入并注入到 HeroService 中

src/app/hero.service.ts

• 5.1 导入消息服务

import { MessageService } from './message.service';

• 5.2 注入服务

constructor(private messageService: MessageService) { }

• 5.3 修改方法 getHeroes(),获取时自动添加一条消息

getHeroes(): Observable<Hero[]> {
  // TODO: send the message _after_ fetching the heroes
  this.messageService.add('HeroService: fetched heroes');
  return of(HEROES);
}

6 在Message组件中显示消息。

src/app/messages/messages.component.ts

• 6.1 导入MessageService

import { MessageService } from '../message.service';

• 6.2 注入服务

constructor(public messageService: MessageService) {}

• 6.3 修改消息模板

<div *ngIf="messageService.messages.length">

  <h2>Messages</h2>
  <button class="clear"
          (click)="messageService.clear()">clear</button>
  <div *ngFor='let message of messageService.messages'> {{message}} </div>

</div>

7 修改Hero组件

• 7.1 导入MessageService
• 7.2 注入MessageService
• 7.3 在选择时将选择的对象传送给MessageService， 这样MessageService就会在选中时渲染页面了。

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

import { Hero } from '../hero';
import { HeroService } from '../hero.service';
import { MessageService } from '../message.service';

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {

  selectedHero: Hero;

  heroes: Hero[];

  constructor(private heroService: HeroService, private messageService: MessageService) { }

  ngOnInit() {
    this.getHeroes();
  }

  onSelect(hero: Hero): void {
    this.selectedHero = hero;
    this.messageService.add(`HeroesComponent: Selected hero id=${hero.id}`);
  }

  getHeroes(): void {
    this.heroService.getHeroes()
        .subscribe(heroes => this.heroes = heroes);
  }
}