css - Using Angular Signals with classes - Stack Overflow

admin管理员组

文章数量:1279050

I have found some behaviour that I can't understand. If I've got a bunch of styles applied like this:

.monkey-ion-item{
 // Country Variant XXXX Not working after upgrade!
  &.monkey-variant-search-list-country {
    .monkey-icon {
      color: var(--ion-color-success, green);
    }
  }

And then in the html:

<ion-item
  [ngClass]="classes"
  class="monkey-ion-item"
  ...

Why does the following work fine:

  get classes() {
    return `monkey-variant-${this.variant()} ` +
    `monkey-input-type-${this.type()} ` +
    'monkey-input';
  }

Doing this successfully adds all of the listed classes to the ion-item element that they are added to in the template. And they show up perfectly in the properties -> classlist when I inspect the DOM.

but the signal approach to the same fails:

  classes: Signal<string[]> = computed(() => [
    `monkey-variant-${this.variant()}`,
    `monkey-input-type-${this.type()}`,
    'monkey-input',
  ]);

In the case where it fails, if I inspect the DOM, I can see some reference to the classes, but it's clearly not right!

ng-reflect-ng-class=\"[Computed: monkey-variant-sear

I'm migrating code over to use signals and was under the impression that this was the "right" way to do things. But I'm clearly missing something here?!

I have found some behaviour that I can't understand. If I've got a bunch of styles applied like this:

.monkey-ion-item{
 // Country Variant XXXX Not working after upgrade!
  &.monkey-variant-search-list-country {
    .monkey-icon {
      color: var(--ion-color-success, green);
    }
  }

And then in the html:

<ion-item
  [ngClass]="classes"
  class="monkey-ion-item"
  ...

Why does the following work fine:

  get classes() {
    return `monkey-variant-${this.variant()} ` +
    `monkey-input-type-${this.type()} ` +
    'monkey-input';
  }

Doing this successfully adds all of the listed classes to the ion-item element that they are added to in the template. And they show up perfectly in the properties -> classlist when I inspect the DOM.

but the signal approach to the same fails:

  classes: Signal<string[]> = computed(() => [
    `monkey-variant-${this.variant()}`,
    `monkey-input-type-${this.type()}`,
    'monkey-input',
  ]);

In the case where it fails, if I inspect the DOM, I can see some reference to the classes, but it's clearly not right!

ng-reflect-ng-class=\"[Computed: monkey-variant-sear

I'm migrating code over to use signals and was under the impression that this was the "right" way to do things. But I'm clearly missing something here?!

• css
• angular
• signals
• ng-class
• angular-signals

Share Improve this question Follow edited Feb 25 at 6:12 Naren Murali 58.1k55 gold badges4444 silver badges7676 bronze badges asked Feb 25 at 2:18 monkeymonkey 1,66122 gold badges2121 silver badges4444 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 2

Using the computed is best. Since the output is memoized, if the inputs do not change, the output is not recomputed.

classes: Signal<string[]> = computed(() => [
  `monkey-variant-${this.variant()}`,
  `monkey-input-type-${this.type()}`,
  'monkey-input',
]);

You just need to execute the computed. Since computed is a function we have to execute it to access the value inside.

<ion-item
  [ngClass]="classes()"
  class="monkey-ion-item"
  ...

本文标签： cssUsing Angular Signals with classesStack Overflow