Question

我在通过服务公开的后端设置。将小部件反复连接到设置是很常见的，所以我创建了一个指令，允许设置将小部件附加到的设置的唯一名称：

<dropdown appSetting="uniqueName">

我有双向绑定工作。

现在，在代表组的设置中，有一个定义选项的枚举。我想使用绑定设置填充子项的ngFor：

<dropdown appSetting="uniqueName" #selector>
  <option *ngFor="let option of selector.setting.options">

显然这不起作用。我无法访问指令状态。我尝试过的大部分内容都以未定义的ngForOf或精彩的ExpressionChangedAfterItHasBeenCheckedError结束。是否有一种干净的方法来利用现有指令来填充子项？

（我已尝试过自定义*appFor，但无法让它正常工作）

Answer 1

更好的答案：

指令具有允许引用它们的导出功能。只需添加：

@Directive({
  selector: '[appSetting]',
  exportAs: 'appSetting'
})

然后访问：

  <dropdown
        appSetting="uniqueName" #varId="appSetting"
        [(ngModel)]="varId.settingValue">
        <option *ngFor="let option of varId.options" [value]="option">{{ option }}</option>
  </dropdown>

原始答案

一个简单的包装器组件完成了该工作，可以访问模板中任何对象的设置状态：

<setting-group #setting
  [uniqueName]="foo">
  <dropdown
    [(ngModel)]="setting.settingValue">
    <option *ngFor="let option of setting.options">{{ option }}</option>
  </dropdown>
</setting-group>

如果有办法避免这种一次性包装，请告诉我。

访问指令状态并填充ngFor

1 个答案: