angular компонент, проверьте, существует ли атрибут - PullRequest
0 голосов
/ 29 мая 2020

Допустим, у меня есть angular компонент ie <this-thing></this-thing>, который делает это.

Теперь я хочу добавить к нему что-то еще, ie <this-thing glows></this-thing> Я бы хотел, чтобы компонент немного измените, если присутствует атрибут glow .

Мне удалось сделать это через <this-thing [glows]="true"></this-thing> и в компоненте, который у меня есть

@Input() public set glows(value: boolean) {
    console.log(value);
}

Но это становится слишком многословен.

Если в компоненте нет атрибута glows, то он false, а если есть, то true.

Есть ли лучший способ добиться этого?

Спасибо за внимание.

Ответы [ 3 ]

1 голос
/ 29 мая 2020

используйте @Attribute и @optional в конструкторе см. Документацию

constructor(@Optional() @Attribute('glow') glow: any) {
  console.log(glow)
  console.log(glow==undefined)
}

<hello glow></hello> //give you '',false
<hello></hello> //give you null,true
0 голосов
/ 29 мая 2020

Вы можете добиться этого с помощью декоратора @ HostBinding , который позволяет вам позже изменить атрибут внутри вашего кода.

Пример кода для атрибута glows в коде компонента

@HostBinding('attr.glows')
public glows: boolean;

this.glows = true; // Sets the glows attribute
this.glows = false; // Removes the glows attribute

Пример кода для атрибута glows в стилях компонентов

:host([glows]) {
  /* Custom styles for component when the attribute is present */
} 
0 голосов
/ 29 мая 2020

Я думаю, это зависит от того, чего вы пытаетесь достичь. Если это просто логическое значение для использования в компоненте / шаблоне, я не думаю, что вам нужен установщик, так что

@Input() glows : boolean;

в this-thing.component.ts будет достаточно.

В this-thing.component. html вы затем можете привязать определенный класс c к элементу dom с помощью ngClass

<div [ngClass]="{'glows': glows}">This glows if true</div>

компонент. css

.glows {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...