src/app/app.component.html

@@ -1,3 +1,2 @@
 <h1>{{title}}</h1>
-<app-heroes></app-heroes>
+<app-heroes></app-heroes>
-<app-messages></app-messages>

src/app/app.component.ts

@@ -1,14 +1,13 @@
 import { Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
 import { HeroesComponent } from "./heroes/heroes.component";
-import { MessagesComponent } from "./messages/messages.component";
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css'],
-  imports: [HeroesComponent, MessagesComponent] 
+  imports: [HeroesComponent] 
 })
-
 export class App {
   title = 'Tour of Heroes';
 }

src/app/hero.service.ts

@@ -1,21 +1,9 @@
 import { Injectable } from '@angular/core';
-import { Hero } from './hero';
-import { HEROES } from './mock-heroes';
-import { Observable, of } from 'rxjs';
-import { MessageService } from './message.service';
 
 @Injectable({
   providedIn: 'root'
 })
-
 export class HeroService {
 
-  getHeroes(): Observable<Hero[]> {
+  constructor() { }
-  const heroes = of(HEROES);
+}
-  this.messageService.add('HeroService: fetched heroes');
-  return heroes;
-}
-
-  constructor(private messageService: MessageService) { }
-}
-

src/app/heroes/heroes.component.ts

@@ -1,10 +1,9 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 import { Hero } from '../hero';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
-import { HeroService } from '../hero.service'; //новая библиотека добавлена вместо HEROES
+import {HEROES} from '../mock-heroes';
 import { HeroDetailComponent } from '../hero-detail/hero-detail.component';
-import { MessageService } from '../message.service';
 
 @Component({
   selector: 'app-heroes',
@@ -13,25 +12,14 @@ import { MessageService } from '../message.service';
   imports: [CommonModule, FormsModule, HeroDetailComponent]
 })
 
-export class HeroesComponent implements OnInit {
+export class HeroesComponent { //определяем класс со списком героев
-
+  heroes = HEROES;
   selectedHero?: Hero;
 
-  heroes: Hero[] = [];
-
-  constructor(private heroService: HeroService, private messageService: MessageService) { }
-
-  ngOnInit(): void {
-    this.getHeroes();
-  }
-
   onSelect(hero: Hero): void {
-    this.selectedHero = hero;
+  this.selectedHero = hero;
-    this.messageService.add(`HeroesComponent: Selected hero Name=${hero.name}`);
   }
 
-  getHeroes(): void {
+}
-    this.heroService.getHeroes()
+
-        .subscribe(heroes => this.heroes = heroes);
+
-  }
-}

src/app/message.service.ts

@@ -1,17 +0,0 @@
-import { Injectable } from '@angular/core';
-import { CommonModule } from '@angular/common';
-
-@Injectable({
-  providedIn: 'root',
-})
-export class MessageService {
-  messages: string[] = [];
-
-  add(message: string) {
-    this.messages.push(message);
-  }
-
-  clear() {
-    this.messages = [];
-  }
-}

src/app/messages/messages.component.css

@@ -1,19 +0,0 @@
-/* MessagesComponent's private CSS styles */
-h2 {
-  color: #A80000;
-  font-family: Arial, Helvetica, sans-serif;
-  font-weight: lighter;
-}
-
-.clear {
-  color: #333;
-  background-color: #eee;
-  margin-bottom: 12px;
-  padding: 1rem;
-  border-radius: 4px;
-  font-size: 1rem;
-}
-.clear:hover {
-  color: white;
-  background-color: #42545C;
-}

src/app/messages/messages.component.html

@@ -1,8 +0,0 @@
-<div *ngIf="messageService.messages.length">
-
-  <h2>Messages</h2>
-  <button type="button" class="clear"
-          (click)="messageService.clear()">Clear messages</button>
-  <div *ngFor='let message of messageService.messages'> {{message}} </div>
-
-</div>

src/app/messages/messages.component.ts

@@ -1,17 +0,0 @@
-import { Component } from '@angular/core';
-import { MessageService } from '../message.service';
-import { CommonModule } from '@angular/common';
-
-@Component({
-  selector: 'app-messages',
-  imports: [CommonModule ],
-  templateUrl: './messages.component.html',
-  styleUrl: './messages.component.css'
-})
-
-export class MessagesComponent {
-
-  constructor(public messageService: MessageService) {}
-
-}
-