Angular2+：作用域属性 (<div *prop="let p=obj.prop"></div>)

Question

我 HTML 多次这样：

     <div class="form-group">
            <label for="countPumps"> {{"CountPumps"|localize}}</label>
            <select id="countPumps"
                    class="form-control"
                    [ngClass]="{'edited':params.countPumps.value!=null}"
                    (ngModelChange)="params.countPumps.updateRefs()"
                    (blur)="params.countPumps.checkValue()"
                    [(ngModel)]="params.countPumps.value">
                       <option [ngValue]="1">1</option>
                       <option [ngValue]="2">2</option>
            </select>

    </div>

如您所见，我需要多次写“param.countPumps.xxxxx”。这是错误的来源，所以我宁愿这样：

     <div class="form-group" *theThingIdontKnowAbout="let param=params.countPumps">
            <label for="countPumps"> {{"CountPumps"|localize}}</label>
            <select id="countPumps"
                    class="form-control"
                    [ngClass]="{'edited':param.value!=null}"
                    (ngModelChange)="param.updateRefs()"
                    (blur)="param.checkValue()"
                    [(ngModel)]="param.value">
                       <option [ngValue]="1">1</option>
                       <option [ngValue]="2">2</option>
            </select>

     </div>

所以我想要的是“*theThingIdontKnowAbout”定义在此 DIV 中使用的对象。我不知道在那里写什么才能让它按照我想要的方式工作。 ngFor 就是这样做的，所以我尝试了这个，它有效，但它是 suuuper hacky:

<div class="form-group" *ngFor="let param of [params.countPumps]">
       <label for="countPumps"> {{"CountPumps"|localize}}</label>
             <select id="countPumps"
                     class="form-control"
                     [ngClass]="{'edited':param.value!=null}"
                     (ngModelChange)="0"
                    (blur)="param.checkValue()"
                     [(ngModel)]="param.value">
             <option [ngValue]="1">1</option>
             <option [ngValue]="2">2</option>
      </select>
</div>

如果没有什么方便的地方，我会直接创建组件，但在这一点上，这似乎还是有点过分了。

Answer 1

这是一个非常原始的结构指令，用于传递上下文：

@Directive({ selector: '[myContext]' })
export class MyContextDirective implements OnChanges {
  private _viewRef: EmbeddedViewRef<any> | null = null;
  @Input('myContext') context;
  @Input('myContextPath') path: string;

  constructor(
    private templateRef: TemplateRef<any>,
    private viewContainer: ViewContainerRef
  ) {}

  ngOnChanges() {
    this._viewRef = this.viewContainer.createEmbeddedView(this.templateRef, {
      $implicit: this.context[this.path]
    });
  }
}

您可以像这样在模板中使用它：

<p *myContext="params; path:'countPumps'; let foo">{{foo.somePropOnCountPumps}}</p>

Angular2+：作用域属性 (<div *prop="let p=obj.prop"></div>)

Angular2+: Scoped Property (<div *prop="let p=obj.prop"></div>)

html

scope

angular

Angular2+：作用域 属性 (<div *prop="let p=obj.prop"></div>)

Angular2+: Scoped Property (<div *prop="let p=obj.prop"></div>)

html

scope

angular

Angular2+：作用域属性 (<div *prop="let p=obj.prop"></div>)