Angular 5 - 具有操作 HTML 元素的属性的组件选择器标签

Question

我想问你，我怎样才能做到这一点：

我有一个带有一些框的组件（让我们将其命名为 FeatureComponent），该框内有三个按钮。 在另一个组件（MainComponent）中，我通过选择器标签使用我的 FeatureComponent 。 现在我想做的是使用来自 FeatureComponent 的选择器标签，如下所示：

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

我已经阅读了有关 @Input 和 @Output 以及指令的内容，但我不确定这是否正确。

有人可以告诉我应该用什么来实现我的目标吗？

编辑：

功能组件：

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>

我想要实现的是在许多其他组件中使用此组件，但可以管理此单选按钮，例如：

另一个组件：

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

另一个组件2：

<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 ，因为如果该值为角度完全删除属性null 。