dati vincolanti per angolari 2 componenti percorso

Question

Sono il seguente modello al momento

<project-form [nextId]="projects.length" (newProject)="addProject($event)"></project-form> 
<project-list [projects]="projects"></project-list> 

all'interno del ProjectAppComponent.

class ProjectAppComponent { 
    projects: Project[] = [ 
     { id: 0, title: "Build the issue tracker" }, 
     { id: 1, title: "Basecamp" }, 
    ] 

    addProject(project: Project) { 
     this.projects.push(project); 
    } 
} 

ProjectAppComponent ha l'array di progetti e il metodo che inserisce nuovi elementi in esso. Voglio creare percorsi figlio per la forma del progetto e l'elenco dei progetti, così posso fare /projects/new e /projects/show per mostrare il modulo o l'elenco. Ho creato le configurazioni dei percorsi in questo modo:

@Component({ 
    template: ` 
     <div> 
      <router-outlet></router-outlet> 
     </div> 
    `, 
    directives: [ RouterOutlet ] 
}) 
@RouteConfig([ 
    { path: '/list', name: 'ProjectList', component: ProjectListComponent, useAsDefault: true }, 
    { path: '/new', name: 'ProjectForm', component: ProjectFormComponent }, 
]) 
class ProjectAppComponent { 
    projects: Project[] = [ 
     { id: 0, title: "Build the issue tracker" }, 
     { id: 1, title: "Basecamp" }, 
    ] 

    addProject(project: Project) { 
     this.projects.push(project); 
    } 
} 

per la classe ProjectAppComponent stessa. Il problema ora è che non so come passare l'array di progetti ([projects]="projects" nel modello) a ProjectListComponent poiché il selettore <project-list> non è più utilizzato (è necessario utilizzare <router-outlet>). ProjectListComponent dipende dallo @Input() project: Project per il rendering di tutti i progetti. Come dovrei risolvere il problema? Ecco il componente dell'elenco progetti -

@Component({ 
    selector: 'project-list', 
    template: ` 
     <ul> 
      <project-component *ngFor="#project of projects" [project]="project"></project-component> 
     </ul> 
    `, 
    directives: [ProjectComponent] 
}) 
class ProjectListComponent { 
    @Input() projects: Project[]; 
} 

Answer 1

Non potresti semplicemente utilizzare un servizio?

import {Injectable} from 'angular2/core'; 
import {Project} from '...'; 


@Injectable() 
export class ProjectService { 
    public projects: Project[] = [ 
    { id: 0, title: "Build the issue tracker" }, 
    { id: 1, title: "Basecamp" }, 
    ]; 

    addProject(...args): number { 
    return this.projects.push(new Project(...args)); 
    } 
}