Pass data to a component of the Router [closed]

6

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

    
asked by Alejandro Antolin 23.08.2016 в 09:18
source

0 answers