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

Question

想请教一下，我该如何实现：

我有一个带有一些框的组件（我们将其命名为 FeatureComponent），并且在该框内有三个按钮。在另一个组件 (MainComponent) 中，我通过 selector tag 使用我的 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>

Disabled 是一个特殊的属性，无论值是什么都会产生影响，这就是为什么我们在传递 true 或 null 的地方使用 for 因为 Angular 完全删除如果值为 null.

的属性

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

Angular 5 - Component selector tag with properties to manipulate HTML elements

typescript

angular

angular5