Angular 5 — тег селектора компонентов со свойствами для управления элементами HTML

Я хотел бы спросить вас, как я могу добиться этого:

У меня есть компонент (давайте назовем его FeatureComponent) с некоторым полем и внутри этого поля три кнопки. В другом компоненте (MainComponent) я использую свой FeatureComponent по тегу selector. Теперь я хотел бы использовать тег селектора из 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>

typescript angular angular5
person Tavadur    schedule 20.02.2018    source источник
comment
Мне непонятно, чего вы пытаетесь добиться. Если вы добавите @Input() buttonOne:string; в свой класс компонентов, вы сможете получить доступ к значению, используя ngOnInit() { console.log(this.buttonOne); }. Входное значение не будет доступно в конструкторе, который выполняется до ngOnInit. На angular.io есть много отличных руководств   -  person Günter Zöchbauer    schedule 20.02.2018
comment
@GünterZöchbauer Я отредактировал свой пост, чтобы сделать его более понятным.   -  person Tavadur    schedule 20.02.2018

Ответы (1)


arrow_upward
1
arrow_downward 

<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 — это специальный атрибут, который действует независимо от значения, поэтому мы используем for, где мы передаем true или null, потому что Angular полностью удаляет атрибут, если значение равно null.

person Günter Zöchbauer    schedule 20.02.2018
comment
Большое спасибо! Работает отлично. :) - person Tavadur; 20.02.2018
comment
Рад слышать. . - person Günter Zöchbauer; 20.02.2018