[成都|内门弟子]CSS-何俊|2021年03月05日的日报-技能树.IT修真院

发表于： 2021-03-05 23:58:44

1 1073

今天完成的事情：

学习angular的添加服务与导航

创建 HeroService

ng generate service hero

获取英雄数据

在hero.service.ts 中。导入 Hero 和 HEROES，并添加一个 getHeroes 方法，让它返回模拟的英雄列表

import { Hero } from './hero';
import { HEROES } from './mock-heroes';

getHeroes(): Hero[] {
  return HEROES;
}

提供（provide） HeroService

@Injectable({
  providedIn: 'root',
})

添加服务后，需修改 HeroesComponent

在heroes.component.ts中

删除 HEROES ，导入 HeroService，并注入 HeroService

import { HeroService } from '../hero.service';

heroes: Hero[];

constructor(private heroService: HeroService) {}

在 ngOnInit() 中调用

ngOnInit() {
  this.getHeroes();
}

可观察（Observable）的数据:

在hero.service.ts 文件，从 RxJS 中导入 Observable 和 of 符号

import { Observable, of } from 'rxjs';
// 修改getHeroes() 方法
getHeroes(): Observable<Hero[]> {
  return of(HEROES);
}

显示消息:

创建显示消息的文件夹messages

ng generate component messages

app.component.html下添加，以显示消息视图

<app-messages></app-messages>

在message.service.ts中修改

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

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

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

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

并且注入到英雄服务hero.service.ts 中

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

修改这个构造函数，添加一个私有的 messageService 属性参数

// constructor(private heroService: HeroService) {}

constructor(private messageService: MessageService) { }

发送消息，修改 getHeroes() 方法

getHeroes(): Observable<Hero[]> {
  this.messageService.add('HeroService: fetched heroes');
  return of(HEROES);
}

将消息服务绑定到messages.component.html

<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>

问题：

应用导航和获取数据暂时不太明白，准备重复看

返回列表

【任务10】 [成都|内门弟子]CSS-何俊 | 2021年03月05日 的日报 中品

评论

分享到

【任务10】 [成都|内门弟子]CSS-何俊 | 2021年03月05日的日报中品