Angular 6 HostBinding с несколькими значениями? - PullRequest
Новая
       30

Angular 6 HostBinding с несколькими значениями?

0 голосов
/ 15 мая 2018

Я успешно использовал @HostBinding в своем приложении Angular 6 для применения свойств к компоненту хоста, как при применении класса, когда переменная истинна: ​​

@HostBinding('class.compact-ui') isCompact;

Сейчасоднако мне нужно назначить один из 4 возможных классов на основе модели меню выбора.Например, пользователь может red, blue или green.

Я полагаю, что я могу использовать несколько привязок хоста, когда любой из цветов истинен:

@HostBinding('class.green-ui') uiColor === 'green';

Но это кажется неправильным.Как правильно это сделать?

1 Ответ

0 голосов
/ 25 октября 2018

Чтобы назначить хосту несколько классов, вы можете сделать это: 

@HostBinding('class') classAttribute: string = 'classA classB';

Для вашего случая вы можете сделать что-то вроде этого: 

@HostBinding('class') classAttribute: string;

// Example function that updates the classAttribute property
// You might handle it differently in your application
updateClassAttribute(color: string, isCompact: boolean) {
  const classes: string[] = [`${color}-ui`];

  if (isCompact) classes.push('compact-ui');

  this.classAttribute = classes.join(' ');
}

Обратите внимание, что вышеуказанная логика функции можетзаписать в одну строку, например: 

this.classAttribute = [ ...isCompact ? ['compact-ui'] : [], `${color}-ui` ];

Кроме того, вы можете рассмотреть возможность использования хранилища Redux (например, @ngrx/store) для этих значений (isCompact, color), если они вам нужныв нескольких местах в вашем приложении.

...