Angular 2：从组件定义访问属性列表

Question

我正在用标签、布局、引导类等定义我自己的<input> 组件。所以当我像这样使用它时：

<my-input label="Street" [(ngModel)]="address.street"></my-input>

然后它会实例化 MyInputComponent，它会使用一个丰富的模板来生成类似的东西：

<div class="form-group">
    <label class="col-sm-3 control-label">{{ label }}</label>
    <div class="col-sm-9">
        <input [(ngModel)]="value" class="form-control">
    </div>
</div>`

这很好用，我只需使用 @Input 就可以访问“标签”属性：

@Component({...})
export class MyInputComponent {
    @Input() label = '';

现在这仅适用于一些属性。但是 HTML 标准 <input> 标签实际上有几十个属性，例如 type、min、max、placeholder... 我不想将每个可能的属性都定义为 @ 987654332@ MyInputComponent 的属性。

相反，我想动态迭代<my-input> 中的属性并将它们复制到我的模板中的<input> 元素。我知道我可以通过在构造函数中使用 ElementRef 然后访问其 nativeElement 属性来访问 DOM 元素的属性列表：

constructor(eref: ElementRef) {
    console.log("***", eref.nativeElement);
}

但出于多种原因，不鼓励使用 nativeElement 作为一种不好的做法（请参阅https://angular.io/docs/js/latest/api/core/index/ElementRef-class.html）。

所以问题是：有什么方法可以访问<my-input> 的属性列表，而不需要直接读取本机浏览器 DOM？

同样，一旦我以中立的、非本地的方式获得属性列表，我如何将它们传播到模板中的 <input> 标记？

Answer 1

我认为你最好使用嵌入来将你的输入包装在你喜欢的 MyInputComponent 中。看看下面的博客：

https://toddmotto.com/transclusion-in-angular-2-with-ng-content

基本上你会改变这个：

<my-input label="Street" [(ngModel)]="address.street"></my-input>

对此：

<my-input label="Street">
    <input [(ngModel)]="address.street"class="form-control">
</my-input>

因此，您仍然可以轻松访问输入的所有属性，并通过少量工作获得您想要的装饰。