Angular 角度5-通过服务或输出将数据从父级传递到组件，发送整个列表

好的，这里涉及到一些组件： 分配列表组件 添加分配按钮 添加分配弹出框

我的父组件在NgFor中显示分配列表，对于每个表行，都有一个带有单击事件的子组件“添加分配按钮”

如果单击了，则my parent组件会将整个分配（不是复数）传递给一个服务，其中add assignment popover可以订阅该服务。问题是，它会发送整个列表。我不知道如何使点击事件具体化。尝试在每个按钮上使用索引，但没有任何效果

编辑：我想澄清两件事。 我在AddContactPopover中尝试了@Input，得到了相同的结果。 当我说整个清单时，我的意思是每个作业一个接一个地被发送。当我记录控制台日志时（如果列表中有五个分配），将有五个控制台日志（控制台日志1有第一个分配，依此类推）

我只想要属于我单击按钮所在行的作业（1，1）。

这是父组件（为了节省时间，我只显示相关数据）

编辑：这是联系人按钮

@Component({
selector: 'add-contact-button-component',
template: `
<a class="assignment-add-dependent-link lnk"
  title="add new contact"
  (click)="addButton()"
   [routerLink]="" 
  style="margin-right: 6px;">
   <i class="icon-plus blue"></i>
    <span>New Contact</span>
 </a>
`
 })

export class AddContactButtonComponent {

addClick = false;

constructor(private buttonClickService: ButtonClickService) { }

addButton() {
    this.addClick = !this.addClick;
    this.buttonClickService.showAddContactPopOver.next(this.addClick);
   }

}

@组件({
选择器：“添加联系人按钮组件”，
模板：`
新联系人
`
})
导出类AddContactButtonComponent{
addClick=false；
构造函数（私有buttonClickService:buttonClickService）{}
addButton（）{
this.addClick=！this.addClick；
this.buttonClickService.showAddContactPopOver.next（this.addClick）；
}
}

不能将单击事件附加到角度组件。相反，您可以将对象作为输入发送到组件。在子组件中，您可以调用服务，而不是使用EventEmitter（），您应该使用Subject

如果您希望将数据从子组件共享到父组件，则将主要使用EventEmitter

---

您可以使用@Input、@Output修饰符，这些修饰符是为处理此类数据共享和组件交互而创建的

---

Ref:

您还可以共享联系人按钮组件代码吗？处理该组件中的单击事件时，可能会出现错误。我也不确定，为什么要在服务中使用EventEmitter。有什么特别的原因吗？我正在学习，这是我第一个使用angular的项目，它看到你可以使用EventEmitter，为什么不呢？这不是最优的吗？一切都在我得到数据的意义上运行，只是我得到了整个列表，而不仅仅是点击的对象……嗯，是的。这是我一开始试过的。我从一个stackthread开始跟踪这个stackblitz：我在assignment-list.html中将[dataFromParent]=“assignment”添加到add contact popover中，然后在add contact popover组件中输入dataFromParent，但它是相同的=当我单击其中一个按钮时发送了整个列表..但我可以将其更改回来，如果这是惯例的话，看来@SureshKumarAriya已经解决了。（Y） 嗯，是的。这是我一开始试过的。我从一个stackthread开始跟踪这个stackblitz：我在assignment-list.html中将[dataFromParent]=“assignment”添加到add contact popover中，然后在add contact popover组件中输入dataFromParent，但它是相同的=当我单击其中一个按钮时发送了整个列表..但我可以将其更改回来，如果这是惯例的话。创建Stackblitz并更新通信流程。我就是这样做的。但只有我在上面的评论中写的那几行。我没有向父级发送任何内容，我只在add contact popover上有输入datafrompparent，我将其发送给控制台记录它的函数，并且在分配列表html上的add contact popover组件上有[datafrompparent]=“assignment”。当我点击add contact（添加联系人）按钮时，它会分别显示所有五个工作分配，在每个控制台中，几乎就像我同时点击所有五个按钮一样。可能是因为作业没有ID吗？

@Injectable()
export class TableRowDataService {
assignmentData = new EventEmitter<AssignmentListItem>();

sendAssignmentData(assignmentObject: AssignmentListItem) {
    this.assignmentData.emit(assignmentObject);
   }
}

    ngOnInit() {
    this.resetValues();

    //Clickservice for knowing when createbutton is pushed.
    this.buttonClickService.showAddContactPopOver.subscribe((addContactCLick: boolean) => {
        if (addContactCLick) {

            this.tableRowDataService.assignmentData.subscribe(
                (assignmentObj: AssignmentListItem) => {
                    this.addValuesToPopover(assignmentObj);
                });
        }
    });
}

addValuesToPopover(assignmentObject: AssignmentListItem) {
    console.log('assignmentObject', assignmentObject);
}

@Component({
selector: 'add-contact-button-component',
template: `
<a class="assignment-add-dependent-link lnk"
  title="add new contact"
  (click)="addButton()"
   [routerLink]="" 
  style="margin-right: 6px;">
   <i class="icon-plus blue"></i>
    <span>New Contact</span>
 </a>
`
 })

export class AddContactButtonComponent {

addClick = false;

constructor(private buttonClickService: ButtonClickService) { }

addButton() {
    this.addClick = !this.addClick;
    this.buttonClickService.showAddContactPopOver.next(this.addClick);
   }

}