如何在Angular2中从HTML获取对象

我想从项目列表中获取一个项目，并在另一个组件中使用该对象。我不知道该怎么做。下面是我的HTML代码

<li *ngFor = "let project of projects" class="list-group-item">{{project.name}} {{project._id}}>
<a [routerLink]="['/tasks']">View Tasks</a>
<a [routerLink]="['/newTask']" (click)="getAllTasks(project)">Create Task</a>

单击时将对象发送到服务

    setProjectId(id){
    this.project_id = id;
  }



getProjectId(){
    return this.project_id;
  }

并使用ngInit（）获取另一个组件中的id

---

就像您在

getAllTasks（）

中使用

project

变量一样，您可以在要在其中使用对象的组件上设置输入，并将

project

变量绑定到该输入属性。

您可以通过以下方式实现：

<li *ngFor = "let project of projects" class="list-group-item" (click)="emitObject(project)">{{project.name}} {{project._id}}></li>

{{project.name}{{{project.\u id}}>

现在，您可以在ts文件中定义一个新的事件发射器，如下所示：

@Output()
selectedProject = new EventEmitter<any>;

emitObject(project) {
    this.selectedProject.emit(project);
}

@Output（）
selectedProject=新事件发射器；
发射体（项目）{
此.selectedProject.emit（项目）；
}

这将发出一个事件，您可以在html中侦听该事件，然后执行业务逻辑

如果您碰巧在该组件的html中使用了该组件，则还可以将其作为输入属性传递给该组件

---

祝你好运

根据你的评论

---

此组件仅显示项目，因此当我单击特定项目上的链接以创建任务时，我希望重新路由到该组件，并使用该特定项目的id来创建任务

。。。我认为最干净的解决方案是在路线中添加一个查询参数：

路由代码段：

{path:'newTask/：id'，component:NewTaskComponent}

在NewTaskComponent中，您可以按如下方式获取id：

constructor(private activatedRoute: ActivatedRoute,
            private taskService: TaskService) {
  activatedRoute.params.subscribe(
    params => {
      if (params['id'] != undefined) {
        taskService.getTaskById(params['id']).subscribe(
          result => console.log(result),
          error => console.log(error)
        );
      }
    }
}

---

这需要您创建一个taskService，它可以通过id获取任务。

一个问题：组件是在您的li中，还是在单独的模板上？因为如果它是独立的，那么使用服务就最容易了。在模板中，将变量绑定到输入，如下所示：

。在组件代码中，只需声明一个变量作为

@input（）myProject:any的输入

如果它位于li标记内，则可以使用，但它可能位于单独的html模板上，因此使用服务会更好。如果组件关系是父子关系，则Elucius的回答是正确的。否则，需要另一种解决方案。您如何建议为此使用服务@G.能够为您提供答案至关重要：此组件和其他组件之间的关系是什么？此组件仅显示项目，因此当我单击特定项目上的链接以创建任务时，我希望重新路由到该组件并使用该特定项目id创建任务。

@Output()
selectedProject = new EventEmitter<any>;

emitObject(project) {
    this.selectedProject.emit(project);
}

constructor(private activatedRoute: ActivatedRoute,
            private taskService: TaskService) {
  activatedRoute.params.subscribe(
    params => {
      if (params['id'] != undefined) {
        taskService.getTaskById(params['id']).subscribe(
          result => console.log(result),
          error => console.log(error)
        );
      }
    }
}