为什么 addClass 对 Angular 中的 DOM 元素不起作用？

Question

I have DOM component:

<app-ui-element-block (click)=do($event)></app-ui-element-block>

Method is:

public do($event){ 
   const elms = document.getElementsByTagName('app-ui-element-block');

        for (let i = 0; i < elms.length; i++) {
            elms[i].classList.remove('active');
        }

        $event.target.classList.add('active');
}

Why I can not set class for selected element DOM as component?

Answer 1

Why not use a more "angular way". You can use the ngClass directive instead.

<app-ui-element-block [ngClass]="{'active': isActive}" (click)="isActive=true"></app-ui-element-block>

Then you just need a field in your root component named isActive . If you have multiple items then you could either use an array or an indexer or something similar.

Answer 2

So you have a component named UiElementBlock , and you want this to have a class or not:

If these are placed using an *ngFor , you can use the looped element as indicator (or something else):

<app-ui-element-block
  *ngFor="let block of blocks"
  [class.active]="block === active"
  (click)="active = block">
</app-ui-element-block>

In your parent component you need to define this active :

export class ParentUiComponent {
  active?: UiElementBlock;

  blocks = [
    'ui1',
    'ui2',
    'ui3'
  ];
}

If you are not using the *ngFor , and you are manually placing these blocks, you also have the choice to manually assign a variable to it:

<app-ui-element-block
  [class.active]="block1 === active"
  (click)="active = block1"
  #block1>
</app-ui-element-block>

<div> Some random content </div>

<app-ui-element-block
  [class.active]="block2 === active"
  (click)="active = block2"
  #block2>
</app-ui-element-block>

Things get more wild if these components are spread across multiple parent components. You would need to do this logic inside the block itself, in combination with a service:

export interface ActivatableBlock {
  active: boolean;
}

@Injectable({
  providedIn: 'root'
})
export class UiElementBlockService {
  private active?: ActivatableBlock;

  activate(block: ActivatableBlock): void {
    if (this.active) {
      this.active = false;
    }

    block.active = true;
    this.active = block;
  }
}

@Component({
  selector: 'app-ui-element-block',
  template: ``
})
export class UiElementBlock implements ActivatableBlock {
  @HostBinding('class.active')
  active?: boolean;

  constructor(private ub: UiElementBlockService) {}

  @HostListener('click')
  onClick(): void {
    this.ub.activate(this);
  }
}

So, that's just a couple of ways of doing it, without using the DOM, and making things more reusable and easier to test.