时间戳

首页 > 解决方案 > 访问指令状态并填充 ngFor

angular2-directives - 访问指令状态并填充 ngFor

问题描述

我在通过服务公开的后端中有设置。将小部件一遍又一遍地连接到设置是很常见的，因此我创建了一个指令来允许设置设置的唯一名称以将小部件附加到：

<dropdown appSetting="uniqueName">

我有两种方式绑定工作。

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

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

显然那是行不通的。我无法访问指令状态。我尝试的大多数事情都以 undefinedngForOf或美妙的ExpressionChangedAfterItHasBeenCheckedError. 有没有一种干净的方法来利用现有指令来填充孩子？

（我尝试了一个 custom *appFor，但不能完全让它工作）

标签： angular2-directives

解决方案

更好的答案：

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

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

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

推荐阅读