将数据绑定到 Angular 2 路由组件

Question

将数据绑定到 Angular 2 路由组件

8

我现在有以下模板：

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

位于ProjectAppComponent内部。

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

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

ProjectAppComponent有一个项目数组和将新项推入其中的方法。我想为项目表单和项目列表创建子路由，这样我就可以使用/projects/new和/projects/show来显示表单或列表。我像这样创建了路由配置 -

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

对于 ProjectAppComponent 类本身而言，现在的问题是我不知道如何将项目数组（模板中的 [projects]="projects"）传递给 ProjectListComponent，因为不再使用 <project-list> 选择器（必须使用 <router-outlet>）。ProjectListComponent 依赖于 @Input() project: Project 来渲染所有项目。我该如何解决这个问题？以下是项目列表组件 -

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

- Lordking

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Eggy · Accepted Answer

你不能只使用一个服务吗？

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