Javascript 角度-向组件中的转置元素添加属性绑定和事件

我有一个Angular组件，它包含一个

元素，该组件向该元素添加属性绑定和事件侦听器。我正在研究允许消费组件通过转换指定自定义输入字段（可能是父字段）。组件中的当前在制品

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

然后将使用提供的输入。在上述示例中，此功能（即显示自定义输入）。这带来的额外复杂性是，自定义输入字段可能具有父元素，例如，在使用角度材质时

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

---

获取转置输入字段的句柄并向其添加绑定（主要是来自默认输入的

[value]

和

（单击）

绑定）的最佳方法是什么

ngOutletContext

被重命名为

ngTemplateOutletContext

另见

原创

我认为最简单的方法是传递一个

（或

的Angular4）如下

我不确定传递给

[ngOutletContext]=“…”

的值对于您的用例应该是什么样子，因为我不认为我完全理解您的需求

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

@ContentChild(TemplateRef) template:TemplateRef;

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