add new value for repair cod /hero-detail.component.ts

This commit is contained in:
Костя 2025-06-25 11:46:40 +03:00
parent b0153ebb86
commit 80c0236f5e
4 changed files with 9 additions and 15 deletions

View File

@ -7,7 +7,7 @@ export const routes: Routes = [
{ path: '', redirectTo: '/dashboard', pathMatch: 'full' }, //путь по умолчанию { path: '', redirectTo: '/dashboard', pathMatch: 'full' }, //путь по умолчанию
{ path: 'heroes', component: HeroesComponent }, { path: 'heroes', component: HeroesComponent },
{ path: 'dashboard', component: DashboardComponent }, { path: 'dashboard', component: DashboardComponent },
{ path: 'detail/:id', component: HeroDetailComponent }, { path: 'detail/:id', component: HeroDetailComponent },
]; ];

View File

@ -3,10 +3,11 @@ import { Component, OnInit } from '@angular/core';
import { Hero } from '../hero'; import { Hero } from '../hero';
import { HeroService } from '../hero.service'; import { HeroService } from '../hero.service';
import { RouterLink } from '@angular/router'; import { RouterLink } from '@angular/router';
import { HeroSearchComponent } from "../hero-search/hero-search.component";
@Component({ @Component({
selector: 'app-dashboard.component', selector: 'app-dashboard.component',
imports: [CommonModule, RouterLink], imports: [CommonModule, RouterLink, HeroSearchComponent],
templateUrl: './dashboard.component.html', templateUrl: './dashboard.component.html',
styleUrl: './dashboard.component.css' styleUrl: './dashboard.component.css'
}) })

View File

@ -1,7 +1,7 @@
<div id="search-component"> <div id="search-component">
<label for="search-box">Hero Search</label> <label for="search-box">Hero Search</label>
<input #searchBox id="search-box" (input)="search(searchBox.value)" /> <input #searchBox id="search-box" (input)="search(searchBox.value)" />
<ul class="search-result"> <ul class="search-result">
<li *ngFor="let hero of heroes$ | async" > <li *ngFor="let hero of heroes$ | async" >
<a routerLink="/detail/{{hero.id}}"> <a routerLink="/detail/{{hero.id}}">

View File

@ -1,30 +1,26 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { Observable, Subject } from 'rxjs'; import { Observable, Subject } from 'rxjs';
import { import {
debounceTime, distinctUntilChanged, switchMap debounceTime, distinctUntilChanged, switchMap
} from 'rxjs/operators'; } from 'rxjs/operators';
import { Hero } from '../hero'; import { Hero } from '../hero';
import { HeroService } from '../hero.service'; import { HeroService } from '../hero.service';
import { CommonModule } from '@angular/common'; //добавил библиотеку
import { RouterLink } from '@angular/router'; //добавил библиотеку
@Component({ @Component({
selector: 'app-hero-search', selector: 'app-hero-search',
imports: [CommonModule, RouterLink],
templateUrl: './hero-search.component.html', templateUrl: './hero-search.component.html',
styleUrls: [ './hero-search.component.css' ] styleUrls: [ './hero-search.component.css' ]
}) })
export class HeroSearchComponent implements OnInit { export class HeroSearchComponent implements OnInit {
heroes$!: Observable<Hero[]>; heroes$!: Observable<Hero[]>;
private searchTerms = new Subject<string>(); private searchTerms = new Subject<string>();
constructor(private heroService: HeroService) {} constructor(private heroService: HeroService) {}
// Push a search term into the observable stream.
search(term: string): void {
this.searchTerms.next(term);
}
ngOnInit(): void { ngOnInit(): void {
this.heroes$ = this.searchTerms.pipe( this.heroes$ = this.searchTerms.pipe(
// wait 300ms after each keystroke before considering the term // wait 300ms after each keystroke before considering the term
@ -38,9 +34,6 @@ export class HeroSearchComponent implements OnInit {
); );
} }
private searchTerms = new Subject<string>();
// Push a search term into the observable stream. // Push a search term into the observable stream.
search(term: string): void { search(term: string): void {
this.searchTerms.next(term); this.searchTerms.next(term);