Question

我看过几个线程在讨论这个问题，但是我仍然对适合我的情况的正确方法感到困惑，因此我尝试一下。

背景。我有一个.net mvc应用程序，我已经将angular 5添加到了现在的Im中，一点一点地用角组件代替了Jquery脚本。

因此，我有一个列出客户的列表组件，在此列表上，您有客户信息和一个复选框。如果您单击此列表上的任何复选框，则菜单栏上的一个名为"move customer"的按钮将从'disabled'变为可以按下。

如果按下此按钮，将弹出一个带有'li'的视图，其中包含选中了其复选框的客户的名称。客户ID的隐藏元素也位于此'tr'中的'li'上。

我想要的是重复此操作。因此，侦听复选框的单击，取消禁用move-btn并将数据发送到其他组件。而且可能要检查几个客户，所以这必须是连续的事情，可能是列表或订阅，它们不断发送数据并填充接收者列表。然后，它应该在其他组件上列出名称和ID。

** 更新 **

这是我目前拥有的：

这是我的服务，用于从列表组件发送数据以重定位弹出框：

import { Injectable, EventEmitter  } from '@angular/core';
import { EmployeeDataAttributeComponent } from './components/employee/employee.data.attribute.component';

@Injectable()
export class TableRowDataService {

    employeeDataAttribute = new EventEmitter<EmployeeDataAttributeComponent>();

    send(empDataObj: EmployeeDataAttributeComponent) {
        this.employeeDataAttribute.emit(empDataObj);
    }
}

我的列表组件：

当您选中复选框时，'tr class="gridrow"'是获得类'.selected'的原因。 'tr'还将我想要的数据作为数据属性称为'attr.data-employment-name'和'attr.data-employment-personkey'，并且我希望每个选中的'selected' 'tr'都需要这两个数据。

<div>    
    <table class="employment-list new-style" *ngIf="filteredEmployees && filteredEmployees.length"
           attr.data-employment-organisation-nr="{{ filteredEmployees && filteredEmployees[0]?.EmploymentReference.OrganizationRegistrationNumber.FullValue }}">
        <thead>
          .....
        </thead>
        <tbody>
    <tr class="gridrow" 
        id="ngCheckRow" 
        #ngCheckRow 
        *ngFor="let employee of filteredEmployees" 
        attr.data-employment-name="{{employee.Name }}" 
        attr.data-employment-personkey="{{employee.PersonKey.CountryCode}}_{{employee.PersonKey._displayValue }}" 
        attr.data-employment-unitId="{{ unitId }}">
                <td><input type="checkbox"            
                    (change)="getdataAttributes({{employee.Name }}, {{employee.PersonKey.CountryCode}}_{{employee.PersonKey._displayValue }})"></td>
                <td id="pKey">
                    {{employee.PersonKey._displayValue}}
                </td>
                <td>AND SO  ON....</td>
            </tr>
        </tbody>
    </table>
</div>

export class EmployeeListComponent {
    .....
    empDataAttrObj: EmployeeDataAttributeComponent;
    //EmployeeDataAttributeComponent only contains two string props, name andpersonkey
    
getdataAttributes(attrName: string, attrPersonKey: string) {

    this.empDataAttrObj.name = attrName;
    this.empDataAttrObj.personKey = attrPersonKey;

    this.tableRowDataService.send(this.empDataAttrObj);
   }
}

这是我的重定位组件（弹出窗口的视图，将显示每个已检查的客户）以及我现在的想法。在'relocateForm'中，jQuery就是用来执行此操作的。

import { Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { ButtonClickService } from '../../button.click.service';
import { TableRowDataService } from '../../table.row.data.service';
import { EmployeeDataAttributeComponent } from '../employee/employee.data.attribute.component';

@Component({
    selector: 'relocate-employment-popover',
    templateUrl: './relocate.employments.popover.html'
})
export class RelocateEmploymentsPopoverComponent {
    .....
    empDataAttrList: EmployeeDataAttributeComponent[];
    isAlreadyInList: boolean;


    constructor(private route: ActivatedRoute,
        private buttonClickService: ButtonClickService,
        private tableRowDataService: TableRowDataService) {
          ........
    }

    ngOnInit() {
        this.buttonClickService.showRelocatePopOver.subscribe((relocateCLick: boolean) => {
            this.showPopover = relocateCLick;
            if (this.showPopover) {
                this.clearSearch();
            }
        });
    }

    //Get the data
    eventEmitterSubscription = this.tableRowDataService.employeeDataAttribute.subscribe(
        (dataAttrObj: EmployeeDataAttributeComponent) => {
            this.updateList(dataAttrObj);
        });

    //Check if it already exists in list, if true remove, else add.
    updateList(dataAttrObj: EmployeeDataAttributeComponent) {
        this.isAlreadyInList = this.contains(this.empDataAttrList, dataAttrObj);

        if (this.isAlreadyInList) {
            this.empDataAttrList = this.empDataAttrList.filter(item => item !== dataAttrObj);
        } else {
            this.empDataAttrList.push(dataAttrObj);
        }
    }

    contains(arr: EmployeeDataAttributeComponent[], obj: EmployeeDataAttributeComponent) {
        const proxy = new Set(arr);
        return proxy.has(obj);
    }
    
.....

}

............
                            <div class="input-column">
                                <ul class="selected-employments" *ngFor="let employee of empDataAttrList">
                                    <li>
                                        <span>{{ employee.name }}</span>
                                        <input type="hidden" name="EmploymentPersonKeys" value="{{ employee.personKey }}">
                                    </li>
                                </ul>
                                <span class="field-validation-valid hint" attr.data-valmsg-for="EmploymentPersonKeys" attr.data-valmsg-replace="true"></span>
                            </div>
....................

Answer 1

所以看来您有一些需求，第一个是：

收听复选框的点击

为此，请使用标准输入元素（type =“ checkbox”）和Angular的（更改）操作，例如：

<input type="checkbox"(change)="changeAction(id, $event.target.value)">

通过将clicked元素的ID传递给组件，您可以将其添加到列表中。您还可以传递$ event对象（DOM复选框）并访问其target.value属性，在您的情况下，该属性将为true（选中复选框）或false（未选中）

取消禁用move-btn

使用Angular的[disabled]指令：

同样，当您传递行的ID时，在组件中创建isDisabled（id）方法。在该方法中，您只需检查它是否之前已被选中（请参见上文）

将数据发送到其他组件

我不确定您需要传递什么数据，如果它是选定元素的列表，那么使用组件上的@Input指令或使用服务并以这种方式共享数据就很容易。

在这种情况下，您似乎应该使用服务。因此，编写包含数据的服务和属性。然后，可以从组件中使用两种方法（Setter和Getter），使您可以在它们之间共享数据。您还可以编写EventEmitters并在服务中引发事件，以便订阅者组件收到有关更改的通知，例如：

在您的服务中，声明并创建：

public eventEmitter = new EventEmitter<YourType>();

，然后在服务的设置器/更新方法中，执行以下操作：

this.eventEmitter.emit(this.dataObjectYouWantToPass);

现在，您需要做的最后一件事是在您的组件（需要修改更改的组件）中，订阅服务的EventEmitter：

this.eventEmitterSubscription = this.service.eventEmitter.subscribe(
            () => {
                this.doSomethingWhenTheDataChanges();
            });

Angular 5将数据从一个组件中的表传递到另一个组件

1 个答案: