我应该在角度组件中添加名称属性吗?

时间:2018-05-09 12:08:41

标签: angular radio-button components

我在自定义角度组件中有单选按钮,如下所示。我在我的主要组件中使用此自定义组件。在我的主要组件中,我使用完全相同的按钮。问题是,如果我不更改名称属性,它们将无法正常工作。

自定义组件代码如下。

<div class="form-group row">
                        <label class="col-md-3 form-control-label">{{'dvTrackVehicleNumber.showSettings'|translate}}</label>
                        <div class="col-md-9">
                            <div class="btn-group" data-toggle="buttons">
                                <label  style="cursor: pointer;" class="btn btn-primary" [ngClass]="{'active':showSettings=='NONE'}">
                                    <input [(ngModel)]="showSettings" type="radio" value="NONE" name="showSettings" > {{'dvTrackVehicleNumber.showNoSettings'|translate}}
                                </label>
                                <label  style="cursor: pointer;" class="btn btn-primary" [ngClass]="{'active':showSettings=='CONFIGMAIN'}">
                                     <input  [(ngModel)]="showSettings" type="radio" value="CONFIGMAIN" name="showSettings" > {{'dvTrackVehicleNumber.configMain'|translate}}
                                </label>
                                <label  style="cursor: pointer;" class="btn btn-primary" [ngClass]="{'active':showSettings=='CONFIGSETTINGS'}">
                                     <input  [(ngModel)]="showSettings" type="radio" value="CONFIGSETTINGS" name="showSettings" > {{'dvTrackVehicleNumber.configSettings'|translate}}
                                </label>
                            </div>      
                        </div>
                    </div> 

如果我改名=&#34; showSettings&#34; to name =&#34; showSettingsModal&#34;在我的自定义组件中的所有单选按钮中,并将其保留为name =&#34; showSettings&#34;在主要组件系统中工作正常。 显然这引起了冲突..但我很好奇网上有很多自定义组件你可以使用它们并没有造成任何问题。 我应该为我的所有名称属性添加前缀还是有更好的方法?或者我做错了什么?

谢谢

1 个答案:

答案 0 :(得分:1)

由于它是一个单选按钮组,并且主要组件是嵌入此自定义组件(子组件),因此DOM将位于同一页面上。因此,冲突。

更好地使用您已经完成的不同组名。