在单个父组件中多次使用一个组件

Question

我在一个项目应用程序上工作。现在，A可以将物品转移到B。我的界面很简单:左边是要选择的成员列表作为来源，右边是给谁。因为信息源、外观和搜索功能是相同的，所以我想创建一个可以在这里使用的组件(以及在另一个需要类似接口的组件中)。以下是一个实际但简化的版本：

在parent.ts中，我有：

<div class="col-md-3">
    <label>Source</label>
    <app-browser></app-browser>
</div>

<div class="col-md-3">
    <label>Destination</label>
    <app-browser></app-browser>
</div>

AppBrowser.componenet.ts：

selected_g:number=0; //nothing selected yet.

eventSelect(){

    var element=document.ElementByID('data') as HTMLSelectElement;

    let value:number=+element.value;

    if(value==0){
        alert('Make a selection');
        return false;
    }

    this.selected_g=value;
}

模板：

<select id="data">
    <option value="0">Select One</option>
    <option value="1">G1</option>
    <option value="2">G2</option>
</select>
<button (click)="eventSelect()">Confirm</button>

现在的问题是:如果我在第一个实例(source，即我首先插入的实例)中选择了一个有效的选项，那么第二个实例(目标)将不起作用。也就是说，我可以选择值0并单击确认，它就不会报错了。如果第一个实例仅选择0，则会报错。我的印象是，组件就像类:如果我多次插入组件，每个组件都会在自己的权限/空间中工作。但似乎只有第一个实例管理整个过程。我说错了吗？

Answer 1

这里有两个问题。第一个问题是在How to reuse an angular component multiple times上提出的相同问题- angular将只处理根组件的一个DOM元素-因此您不能有多个<app-browser>标记。但是，如果您将选择代码移动到子组件中，它就会起作用-请参见此plunkr demo

第二个问题是您在模板中使用了select中的id="data"。由于您随后尝试使用document.getElementById('data')获取它，因此它总是返回它找到的第一个值。这意味着如果第一个字段未被选中，那么即使您更改了第二个字段，警报也将始终触发，因为第一个id是从文档返回的第一个from。

要解决这个问题，您需要为组件的每个实例提供唯一的id。您可以手动执行此操作，例如<my-sub [id]="xxx">或动态生成它。

在angular 1.x中，这可以用$id完成--我不确定在2+中做这件事的正确方法是什么--但你可以做得更糟，比如使用Math.random()。下面是使用Math.random()：plunkr demo对原始示例的修改。

最后，它可能只适用于此实例，但可以通过其他方式实现重复组件的效果-例如，在root或sub组件中使用ngFor，如果有用，则提供参数(包括id)。