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

Question

好了，这里涉及到的组件有：分配列表组件添加作业按钮添加作业弹出框

我的父组件在 NgFor 中显示分配列表，并且对于每一行 table 都有一个子组件 'add-assignment-button'，上面有一个点击事件。

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

编辑： 我想澄清两件事。 No1：我在 add-contact-popover 中尝试使用 @Input，我得到了相同的结果。 No2：当我说整个列表时，我的意思是每个作业都被逐一发送。当我控制台日志时，（如果我在列表中有五个分配）将有五个控制台日志（控制台日志 1 有第一个分配，依此类推）..

我只想要属于我单击按钮所在行的分配 (1, ONE)。

这是父组件（时间关系，只展示相关数据）

@Component({
selector: 'assignment-list',
template: `
    <tr *ngFor="let assignment of assignmentList">
            <td class="actions">
                <add-contact-button-component(click)="sendClickedRowDataToPopOver(assignment)"></add-contact-button-component>
                <add-assignment-contact-popover></add-assignment-contact-popover>
            </td>
    </tr>
`
})

export class AssignmentList implements OnInit {

  sendClickedRowDataToPopOver(assignment: AssignmentListItem) {
     this.tableRowDataService.sendAssignmentData(assignment);
   }
}

这是 tablerowService

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

}

Answer 1

您不能将点击事件附加到 Angular 组件。相反，您可以将对象作为输入发送到组件。从子组件，您可以调用服务，而不是使用 EventEmitter()，您应该使用 Subject。

如果要从子组件向父组件共享数据，则主要使用 EventEmitter。

https://stackblitz.com/edit/angular-ukupfj

Answer 2

您可以使用为处理此类数据共享和组件交互而创建的@Input 和@Output 装饰器。

参考：https://angular.io/guide/component-interaction

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

Angular 5 - Passing data from parent to component by way of service or output sends the entire list

angular

angular5