Angular2：适用任何属性绑定到子元素

主要成份：

@Component({ 
    selector: "app" 
}) 
@View({ 
    directives: [ChildComponent] 
    template: '<child-component></child-component>' 
}) 
export class App {}

子组件

@Component({ 
    selector: "child-component", 
    template: '<input type="text" id="applyEverythingToMe" />' 
}) 
export class ChildComponent {}

我们如何申请任何属性的绑定，指令，不管怎么样到applyEverythingToMe输入字段，没有通过@Attribute，...在ChildComponent中定义所有内容？

假设例如我们希望通过

<child-component [disabled]="true"></child-component>

的普拉克禁用输入：https://plnkr.co/edit/kndYdGFsp8sEzCPpcKdq?p=preview

编辑：

作为第一答案错过了我们的实际问题，这里是一个有点背景：

我们使用<input type="date" />并将盒中的香蕉分成（）和[]（例如，在此描述：https://stackoverflow.com/a/39890184/1256072）。这当然会将每个组件与parseDate混杂在一起，而且令人烦恼的是我们不能使用[(ngModel)]。由于我们没有找到任何将ngModel指令扩展到例如myModelDate自动拆分[()]并应用解析方法，我们创建了自己的组件，它实现了ControlValueAccessor，因此我们可以将它与[(ngModel)]绑定。此组件模板只包含这一个输入类型=日期字段。现在，我们希望我们自己的组件的行为就像任何其他的输入，所以我们可以简单地使用<my-date [disabled]="true"/>或<my-date [attr.whatever]="something" />没有通过@Input，@Attribute明确定义的所有属性，...

来源

2016-12-16 Marco Schulte

我建议你通过英雄的旅游工作教程，然后再提出这样的问题，如果你仍然有它。本教程将为您解答这个问题 - 还有更多。 –

不，不幸的是它没有。我编辑了我最初的问题，为我们尝试实现的目标提供了更多背景。 –

'@View（{''在9个月前被删除了，你使用的是什么Angular2版本？ –

使用@Input()装饰上要的属性暴露在子组件中。

例如：

import {Component, Input } from '@angular/core'; 

@Component({ 
    selector: "child-component", 
    template: '<input type="text" />' 
}) 
export class ChildComponent { 
    @Input disabled: boolean; 
}

来源

2016-12-17 07:12:01

这正是我们试图避免的。 –

Angular2：适用任何属性绑定到子元素

回答

相关问题