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

这很有效，我可以访问＆＃34;标签＆＃34;仅使用@Input：

来归因

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

现在这对于一些属性来说非常棒。但HTML标准<input>标记实际上有几十个属性，例如type，min，max，placeholder ...而且我不知道希望必须将每个可能的属性定义为MyInputComponent的@Input属性。

相反，我想动态迭代<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

我认为你最好使用transclusion将输入包装在你喜欢的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>

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

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

1 个答案: