同一指令的多个实例，如何在 Angular 4 中隔离范围？答案

【问题标题】：multiple instances of same directive, how to isolate scope in Angular 4?同一指令的多个实例，如何在 Angular 4 中隔离范围？
【发布时间】：2017-08-25 07:48:14
【问题描述】：

我在动态创建的小部件中有相同的选择选项列表。因此，每当我从小部件 #1 中选择一个选项时，也会为其他小部件选择相同的选项。如何隔离它们的范围以从小部件中识别每个选项。我检查了几个链接，例如：this one 或 this one。但我需要在 Angular 4 中完成。有线索吗？

dashboardConfig.component.html ###

这部分要选号。小部件的

 <div class="edit-dashboard">      
     <select [(ngModel)] = "widgetCounter" (change)="widgetCountFunc()">
        <option *ngFor="let i of ArrayOfNumbersForWidget">{{i}}</option>
     <select>
 </div>

这部分用于创建小部件

  <div class="widget-area" *ngFor="let i of widgetObjList ">    

    <select [(ngModel)]="selectedOption (change)="selectedOptForThisWidget()">
         <option *ngFor="let opt of ListOfOpts" [value]="opt">{{opt}}</option>
     </select>
  </div>

dashboardConfig.component.ts ###

 widgetCountFunc(){
     this.ListOfOpts = ArrayMaker(this.widgetCounter);
           }

ArrayMaker() 这部分创建一个选定数字的数组，不详述

所以问题出现在[(ngModel)] = "selectedOption"。

1) 如何为每个小部件选择单独的选项？例如对于小部件 #1 -> 选项 #2；小部件 #2 -> 选项 #5 等

2) 如何显示每个小部件的预选选项 "selectedOption" 假设我们有一个包含小部件和相应选项的 json 文件？

【问题讨论】：

请贴一些代码
后置HTML代码和组件代码。
请为您的问题添加minimal reproducible example。
每个组件应该接收放置在其上的任何指令的唯一实例。如果它们是需要唯一名称的元素，那么您可能会为它们提供所有相同的标识符，这就是它们表现出相同行为的原因......但正如其他用户所提到的，没有您的代码就不可能知道。
添加了最少的代码。

标签： angular angularjs-scope angular2-directives

【解决方案1】：

为什么不创建 angular2/4 组件而不是 angular1 自定义指令？

解决方案为单个选择创建新组件，并在 *ngFor 迭代中使用组件选择器，并从选择器在组件内传递适当的值。

优势它将创建您需要的单个实例。

缺点由于它是单独的实例，因此您需要单独处理组件对象。

【讨论】：