我应该在角度组件中为名称属性添加前缀吗？

Question

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

自定义组件代码如下。

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

如果我在自定义组件内的所有单选按钮中将 name="showSettings" 更改为 name="showSettingsModal" 并在主组件系统中将其保留为 name="showSettings" 工作正常。 显然这会引起冲突。但我很好奇网络上有很多自定义组件可供您使用，它们不会造成任何问题。 我应该为我所有的名字属性加上前缀还是有更好的方法？或者我做错了什么？

谢谢

Answer 1

由于它是一个单选按钮组，并且主组件嵌入了这个自定义组件（子组件），因此 DOM 将在同一页面上。于是就有了冲突。

最好使用不同的组名，就像你已经做过的那样。