Angular2:将所有属性传递给子组件 [英] Angular2: passing ALL the attributes to the child component

问题描述

甚至不知道正确的术语来解释这个问题

所以，想象一下这个场景......

有一个表单输入组件并捕获一些属性并将其传递给内部的标记

<form-input placeholder="输入你的名字" label="名字" [(ngModel)]="name" ngDefaultControl></form-input>

所以，这是标记，希望是不言自明的...

显然在我的 ts 中

 @Input() 标签:string = '';@Input() 占位符:string = '';

然后在视图中我有一些东西

<标签>{{标签}}<input type="text" [placeholder]="placeholder" [(ngModel)] = "ngModel">

现在，到目前为止一切正常......

但是假设我想在它周围添加验证规则......或者添加我没有通过 @Input()

捕获的其他属性

如何将来自 的其他任何内容传递到视图中的 ?

解决方案

对于懒人:

导出类 FormInput 实现 OnInit {@ViewChild(NgModel, {read: ElementRef}) inpElementRef: ElementRef;构造函数(私有元素引用:元素引用) {}ngOnInit() {const 属性 = this.elementRef.nativeElement.attributes;const inpAttributes = this.inpElementRef.nativeElement.attributes;for (let i = 0; i < attributes.length; ++i) {让属性=attributes.item(i);if (attribute.name === 'ngModel' ||inpAttributes.getNamedItemNS(attribute.namespaceURI, attribute.name)){继续;}this.inpElementRef.nativeElement.setAttributeNS(attribute.namespaceURI,attribute.name,attribute.value);}}}

如果嵌套多个传递属性的组件，

ngAfterViewInit 将不起作用，因为 ngAfterViewInit 将在外部元素之前调用内部元素.IE.内部组件将在从外部组件接收属性之前传递其属性，因此最里面的元素不会从最外面的元素接收属性.这就是我在这里使用 ngOnInit 的原因.

Don't even know the proper terminology to explain this problem

so, imagine this scenario...

There is a form-input-component and capturing some attributes and passing it down to the markup inside

<form-input placeholder="Enter your name" label="First name" [(ngModel)]="name" ngDefaultControl></form-input>

So, this is the markup, hope is pretty self explanatory...

obviously in the ts I have

  @Input() label: string = '';
  @Input() placeholder: string = '';

and then in the view I have something down these lines

<div class="form-group">
    <label>{{label}}
    <input type="text" [placeholder]="placeholder" [(ngModel)] = "ngModel">
</div>

Now, all works fine so far...

but let's say I want to add the validation rules around it... or add other attributes that I don't capture via @Input()

How can I pass down anything else that comes down from <form-input> to my <input> in the view?

解决方案

For the lazy ones:

export class FormInput implements OnInit {
  @ViewChild(NgModel, {read: ElementRef}) inpElementRef: ElementRef;

  constructor(
    private elementRef: ElementRef
  ) {}
  
  ngOnInit() {
    const attributes = this.elementRef.nativeElement.attributes;
    const inpAttributes = this.inpElementRef.nativeElement.attributes;
    for (let i = 0; i < attributes.length; ++i) {
      let attribute = attributes.item(i);
      if (attribute.name === 'ngModel' ||
        inpAttributes.getNamedItemNS(attribute.namespaceURI, attribute.name)
      ) {
        continue;
      }
      this.inpElementRef.nativeElement.setAttributeNS(attribute.namespaceURI, attribute.name, attribute.value);
    }
  }
}

ngAfterViewInit won't work if you nest multiple components which pass attributes, because ngAfterViewInit will be called for inner elements before outer elements. I.e. the inner component will pass its attributes before it received attributes from the outer component, so the inner most element won't receive the attributes from the outer most element. That's why I'm using ngOnInit here.

这篇关于Angular2:将所有属性传递给子组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！