dữ liệu Binding để góc 2 thành phần đường

Question

Tôi đã mẫu sau tại thời điểm

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

bên trong ProjectAppComponent.

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

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

ProjectAppComponent có mảng dự án và phương pháp đẩy mục mới vào đó. Tôi muốn tạo các tuyến con cho biểu mẫu dự án và danh sách dự án để tôi có thể làm /projects/new và /projects/show để hiển thị biểu mẫu hoặc danh sách. Tôi đã tạo cấu hình tuyến đường như thế này -

@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); 
    } 
} 

cho chính lớp ProjectAppComponent. Vấn đề bây giờ là tôi không biết làm thế nào tôi sẽ vượt qua mảng dự án ([projects]="projects" trong mẫu) đến ProjectListComponent vì bộ chọn <project-list> không còn được sử dụng nữa (phải sử dụng <router-outlet>). ProjectListComponent phụ thuộc vào @Input() project: Project để hiển thị tất cả các dự án. Tôi nên giải quyết vấn đề này như thế nào? Đây là thành phần danh sách dự án -

@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

Bạn không thể sử dụng dịch vụ?

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)); 
    } 
}