Angular 5-组件选择器标签具有属性，以操纵HTML元素

Question

我想问你，我该如何实现：

我有一个组件(让它命名为特色(，其中一些盒子和此框内三个按钮。在另一个组件(MAINCOMPONEN(中，我正在使用Selector标签使用我的farteurecomponent。现在，我想做的就是从featurecomponent中使用selector标签：

<featurecomponent buttonOne="invisible" buttonTwo="disabled"></featurecomponent>

我已经阅读了@input＆amp;@Output和关于指令，但我不确定这是正确的方式。

有人可以建议我我应该用什么来实现我的目标？

编辑：

featurecomponent：

div class="group-radio-buttons">
<input type="radio"
      value="1"
      name="qaz"checked><small> buttonOne</small></div>
<input type="radio"
      value="2"
      name="qaz"><small> buttonTwo</small></div>
<input type="radio"
      value="3"
      name="qaz"><small> buttonThree</small></div>
</div>

我想实现的目标是在许多其他组件中使用此组件，但有可能管理此收音机按钮，例如：

另一个Component：

<featurecomponent buttonOne="invisible" buttonTwo="disabled"></featurecomponent>

另一个Component2：

<featurecomponent buttonTwo="disabled"></featurecomponent>

Answer 1

<featurecomponent buttonOne="invisible" buttonTwo="disabled"></featurecomponent>

输入允许将值传递给组件

class FeatureComponent {
  @Input() buttonOne:string;
  @Input() buttonTwo:string;
  @Input() buttonThree:string;
}

您可以使用视图绑定来使用组件模板中的输入值

<div class="group-radio-buttons">
<input type="radio"
      [attr.disabled]="buttonOne === 'disabled' ? true : null"
      [hidden]="buttonOne === 'invisible'
      value="1"
      name="qaz"checked><small> buttonOne</small></div>
<input type="radio"
      [attr.disabled]="buttonTwo === 'disabled' ? true : null"
      [hidden]="buttonTwo === 'invisible'
      value="2"
      name="qaz"><small> buttonTwo</small></div>
<input type="radio"
      [attr.disabled]="buttonThree === 'disabled' ? true : null"
      [hidden]="buttonThree === 'invisible'
      value="3"
      name="qaz"><small> buttonThree</small></div>
</div>

禁用是一个特殊属性，无论值是什么，都具有效果，这就是为什么我们使用true或null的位置，因为Angular如果值为null。