将数据绑定到 angular 2 个路由组件
Binding data to angular 2 route components
我目前有以下模板
<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 class 本身。现在的问题是我不知道如何将项目数组(模板中的 [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));
}
}
我目前有以下模板
<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 class 本身。现在的问题是我不知道如何将项目数组(模板中的 [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));
}
}