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: 'heroes', component: HeroesComponent },
{ path: 'dashboard', component: DashboardComponent },
{ path: 'dashboard', component: DashboardComponent },
{ path: 'detail/:id', component: HeroDetailComponent },
];

View File

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

View File

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

View File

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