在单个父组件中多次使用一个组件 [英] Using a component more than once in a single parent component

问题描述

我正在开发项目App。现在，A可以将项目转移到B。我的界面很简单：左侧列出了要选择的成员列表，右侧给出了要提供给谁的成员列表。由于信息的来源，外观和搜索功能是相同的，因此我考虑创建一个可以在此处使用的组件（以及另一个需要类似接口的组件）。这是一个现实但简化的版本：

在parent.ts中，html我有：

 < div class = col-md-3> 
< label>来源< / 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; //尚未选择。 
 
 eventSelect（）{
 
 var element = document.ElementByID（‘data’）作为HTMLSelectElement; 
 
 let value：number = + element.value; 
 
 if（value == 0）{
提醒（进行选择）； 
返回false； 
} 
 
 this.selected_g = value; 
} 
  

模板：

 < select id = data> 
< option value = 0>选择一个< / option> 
< option value = 1> G1< / option> 
< option value = 2> G2< / option> 
< / select> 
< button（click）= eventSelect（）>确认< / button> 
  

现在的问题是：如果我在第一个中选择了有效选项（源，即我插入的实例）第一个），第二个实例（目标）无效。也就是说，我可以选择值0，然后单击确认，它不会出现问题。如果第一个实例仅选择了0，它将抱怨。我当时印象深刻的是，组件就像类：如果多次插入组件，则每个组件都会在自己的权限/空间内工作。但是，似乎只有第一个实例可以管理整个事情。

解决方案

这里有2个问题。第一个是在如何多次重用角度分量时出现的相同问题-angular将只为根组件处理一个DOM元素-因此，您不能有多个< app-browser> 标记。但是，如果将选择代码移动到子组件中，它会起作用-参见此 plunkr演示

第二个问题是您在 select id = data $ c>在模板中。由于您随后尝试使用 document.getElementById（'data'）来获取它，因此它将始终返回找到的第一个。这意味着如果未选择第一个字段，则即使更改第二个字段，警报也将始终触发，因为第一个 id 是从文档返回的第一个字段。 / p>

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

1.x可以使用 $ id 来完成-我不确定在2以上版本中执行此操作的正确方法是什么-但您可能会比使用例如 Math.random（）以下是使用 Math.random（）的原始示例的修改： plunkr演示

最后，它可能仅适用于该实例，但是重复该组件的效果也可以通过其他方式来实现-例如，在 root 或< root 中使用 ngFor code> sub 组件，提供有用的参数（包括 id ）。

I am working on an items App. Now, A can transfer items to B. My interface is simple: list of members to chose from as source on left and to whom to give on the right. Since the source of the information, appearance and search functionality is the same, I thought of creating one component that I can use here (and in another component that requires similar interface). Here is a realistic but simplified version:

In parent.ts, html I have:

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

The 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;
}

the template:

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

Now the problem is: if I select a valid option in the first (source i.e. the instance I inserted first), the second instance (destination) has no effect. That is, I can select value 0 and click Confirm and it wouldn't complain. It would complain if the first instance has selected 0 only. I was under the impression components are like classes: if I insert the components multiple times, each one would work in its own right/space. But it appears only the first instance manages the whole thing. Am I mistaken?

解决方案

There are 2 issues here. The first is the same issue raised at How to reuse an angular component multiple times - angular will process only one DOM element for the root component - so you can't have more than one <app-browser> tag. However it works if you move the select code into a sub-component - see this plunkr demo

The 2nd issue is that you are using id="data" in select in the template. Since you are then trying to fetch it using document.getElementById('data') it will always return the first one it finds. This means that if the first field is unselected, then even if you change the 2nd one the alert will always fire since the first id is the first one returned from the document.

To fix this you need a unique id for each instance of the component. You could do this manually, e.g. <my-sub [id]="xxx"> or posisbly generate it dynamically.

In angular 1.x this could be done with $id - I'm not sure what the correct way to do this in 2+ is - but you could do worse than use e.g. Math.random() Here's a modification of the original example using Math.random(): plunkr demo

Finally, it might only be applicable to this instance, but the effect of repeating the component could be done in other ways - for example using ngFor in the root or sub component, providing arguments (including an id) if useful.

这篇关于在单个父组件中多次使用一个组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！