add new value for repair cod /hero-detail.component.ts
This commit is contained in:
parent
b0153ebb86
commit
80c0236f5e
|
@ -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 },
|
||||||
|
|
||||||
];
|
];
|
||||||
|
|
|
@ -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'
|
||||||
})
|
})
|
||||||
|
|
|
@ -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}}">
|
||||||
|
|
|
@ -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);
|
||||||
|
|
Loading…
Reference in New Issue