我有以下模板的时刻
<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[];
}
你不能只使用一个服务?
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));
}
}