I am trying to make a simple application, which consists of 3 components: SearchComponent , ListComponent and DetailComponent , the scheme would be such that so:
Being the SearchComponent visible in all views, and the other 2 routed components put into a router-outlet.
My problem is, how do I do it so that in the first case (of the image), what I search in SearchComponent will filter the list that contains the ListComponent , and if I'm in DetailComponent, when looking for something in the SearchComponent , I redirected to the first case by already filtering the list.
What I have now, is that when I give it to search, it takes me to the route: mipagina.com/s/palabra_que_he_puesto and this path uses the ListComponent. I leave part of the application of how I have it:
search.html
<header>
<div class="tab">
<div class="tab_center">
<div class="search_wrapper">
<input #search (change)="handleChange(search.value)" placeholder="Buscar...">
</div>
</div>
</div>
search.component.ts
import {Component, Output} from '@angular/core';
import {Course} from './course';
import {Router} from '@angular/router';
@Component({
selector: 'course-search',
templateUrl: 'app/courses/course-search.html'
})
export class CourseSearchComponent {
constructor(private router: Router){}
handleChange(search:string){
this.router.navigate(['/s', search]);
}
}
list.component.ts
import {Component, OnInit} from '@angular/core';
import {Course} from './course';
import {CourseService} from './course.service';
import {Router, ActivatedRoute} from '@angular/router';
@Component({
templateUrl: 'app/courses/course-list.html',
providers: [CourseService]
})
export class CourseListComponent implements OnInit{
public courses:Course[];
public ErrorMessage: string;
private sub: Subscription;
constructor(private courseData:CourseService, private router: Router, private route: ActivatedRoute){
this.sub = this.route.params.subscribe(params => {
let search_key = params['search_key'];
if(search_key){
this.courses = this.courses.filter(element => element.name.indexOf(search_key)!==-1);
}
});
}
ngOnInit(){
this.getCourses();
}
getCourses(){
this.courseData.getCourses().subscribe(
result => {
if(!result){
alert("Error en el servidor");
}else{
this.courses = result;
}
},
error => {
this.ErrorMessage = <any>error;
if(this.ErrorMessage){
alert("Error en la petición");
}
})
}
onSelect(course: Course) {
this.router.navigate(['/course', course.id]);
}
}
detail.component
import {Component, Output, OnInit} from '@angular/core';
import {Router, ActivatedRoute} from '@angular/router';
import {CourseService} from './course.service';
@Component({
template: 'Seleccionado el curso con id {{course}}'
})
export class CourseDetailComponent implements OnInit{
private sub: Subscription;
private course: number;
constructor(
private route: ActivatedRoute,
private router: Router,
private service: CourseService) {}
ngOnInit(){
this.sub = this.route.params.subscribe(params => {
this.course = params['id'];
});
}
}
I'm using Angular 2 RC5
SOLVED : The routes in the module did not matter well: S