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

Question

我正在开发一个项目应用程序。现在，A 可以将项目转移到 B。我的界面很简单：从左侧选择作为来源的成员列表以及在右侧提供给谁的列表。由于信息的来源、外观和搜索功能是相同的，所以我想创建一个我可以在这里使用的组件（以及另一个需要类似界面的组件）。这是一个现实但简化的版本：

在 parent.ts，html 我有：

<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>

现在的问题是：如果我在第一个（源，即我首先插入的实例）中选择了一个有效选项，那么第二个实例（目标）无效。也就是说，我可以选择值 0 并单击确认，它不会抱怨。如果第一个实例只选择了 0，它会抱怨。我的印象是组件就像类：如果我多次插入组件，每个组件都会在自己的权限/空间中工作。但似乎只有第一个实例可以管理整个事情。我弄错了吗？

Answer 1

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

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

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

在 Angular 1.x 中，这可以使用 $id 来完成 - 我不确定在 2+ 中执行此操作的正确方法是什么 - 但你可以做得比使用更糟糕，例如Math.random()这里是使用Math.random()对原始示例的修改：plunkr demo

最后，它可能只适用于这个实例，但重复组件的效果可以通过其他方式来完成——例如在root 或sub 组件中使用ngFor，提供参数（包括id) 如果有用的话。