Question

我有一个包含<input/>元素的Angular组件，该组件添加了属性绑定和事件监听器。我正在研究允许消费组件通过转换来指定自定义输入字段（可能与父节点）。组件中的当前WIP;

<!-- Container for the transcluded element -->
<div #inputWrapper>
  <ng-content></ng-content>
</div>

<!-- Default element to display if no element provided -->
<ng-container *ngIf="inputWrapper.children.length == 0">
  <input 
    [value]="getValue()" 
    [ngClass]="options.inputClasses" 
    (click)="onClick()"
    [attr.placeholder]="options.placeholder"
    type="text"
  >
</ng-container>

意图是如果使用组件，那么

<my-component></my-component>

然后将使用默认输入，但是如果提供了自定义输入;

<my-component>
  <input type="text">
</my-component>

然后将使用提供的输入。使用上面的示例，此功能（即显示自定义输入）。另外的复杂性是，自定义输入字段可能具有父元素，例如在使用Angular Material时;

<my-component>
  <md-input-container>
    <input mdInput placeholder="My Custom Input">
  </md-input-container>
</my-component>

获取有关被转换输入字段的句柄并添加绑定的最佳方法是什么（主要是来自默认输入的[value]和(click)绑定，因此它们的行为类似于默认值？

Answer 1

更新Angular 5

ngOutletContext已重命名为ngTemplateOutletContext

另见https://github.com/angular/angular/blob/master/CHANGELOG.md#500-beta5-2017-08-29

<强>原始

我认为最简单的方法是传递<template>（或Angular4中的<ng-template>），如

<my-component>
  <template let-item><input [value]="option.value" type="text"></template>
</my-component>

这样您就不需要<ng-content>

在MyComponent

@ContentChild(TemplateRef) template:TemplateRef;

<template [ngTemplateOutlet]="template" [ngOutletContext]="{$implicit: options}"></template>

我不确定传递给[ngOutletContext]="..."的值应该如何与您的用例完全相同，因为我认为我完全不了解您的要求。

Angular - 将属性绑定和事件添加到组件中的transcluded元素

1 个答案: