Соединение между 2 компонентами
Я реализую угловой пример. У меня есть вход для поиска в компоненте navbar, и я хочу отобразить результаты поиска в другом компоненте, но я обнаружил проблему, поскольку второй компонент будет знать значение, которое я поместил в текст ввода поиска.
Это мой файл navbar.ts:
import { Component, OnInit, Input } from '@angular/core';
import { Router } from '@angular/router';
import { RechercheService } from
'../../services/recherche/recherche.service';
@Component({
selector: 'navbar',
templateUrl: './navbar.component.html',
styleUrls: ['./navbar.component.scss']
})
export class NavbarComponent implements OnInit {
name: string ;
listUsers;
constructor(){}
ngOnInit() {
}
search() {
let list = this.rechercheService.recherche();
if(this.name.length>2) {
let searchText = (this.name).toLowerCase();
this.listUsers= list.filter( it => {
return it.name.toLowerCase().includes(searchText);
});
if(this.listUsers.length>0){
this.sidenav.open();
}
else {
this.sidenav.close();
}
}
console.log(this.listUsers);
this.name = "";
}
}
Это мой navbar.html:
<div class="col-3">
<div class="input-group mb-2">
<span class="borderColor rounded-left text-center"(click)="search()"><mat-icon class="blueIcon loupeIcon"fontIcon="icon-search"></mat-icon></span>
<input type="text" class="form-control color"placeholder="search" [(ngModel)]="name" >
<button class="btn-al-blue rounded-right" type="submit" >more
creteria</button>
</div>
</div>
Я хочу отобразить результат поиска в другой компонент под названием второй.
как мне это сделать ?
Решение
Создать общий сервис для того же
// Search Control
searchFilter = new Subject<any>();
searchFiltered = this.searchFilter.asObservable();
emitSearchFilter(value) {
this.searchFilter.next(value);
}
излучать из компонента Navbar, как
this.navbarService.emitSearchFilter('search keyword');
и подписаться на другой компонент, как
this.navbarService.searchFiltered.subscribe(value => {
console.log(value);
});
не забудьте отписаться на ngDestroy
Другие решения
Других решений пока нет …